/* ============================================================
   ASCENSION MANAGEMENT — Design System
   Space / ascension theme. Pink→blue horizon signature.
   ============================================================ */

/* ---- Fonts (self-hosted, offline-ready) ---- */
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  /* Space blacks — lifted slightly for a bit more vibe */
  --bg:            #0a0a12;
  --bg-2:          #101019;
  --surface:       #15151f;
  --surface-2:     #1c1c28;
  --surface-3:     #242433;
  --line:          rgba(255,255,255,0.09);
  --line-2:        rgba(255,255,255,0.15);

  /* Brand — from the AM logo + horizon */
  --pink:          #ec1e79;
  --pink-2:        #ff4da6;
  --magenta:       #d81b6a;
  --purple:        #7b4dff;
  --blue:          #4f9fff;
  --blue-2:        #7cc4ff;

  /* Platform colors — OnlyFans blue, Fanvue green */
  --onlyfans:      #4f9fff;
  --onlyfans-2:    #7cc4ff;
  --fanvue:        #2fd08a;
  --fanvue-2:      #5fe0a8;

  /* Brand gradient (the horizon) */
  --grad: linear-gradient(100deg, var(--pink) 0%, var(--purple) 52%, var(--blue) 100%);
  --grad-soft: linear-gradient(100deg, rgba(236,30,121,0.18), rgba(123,77,255,0.14) 52%, rgba(79,159,255,0.18));

  /* Semantic */
  --good:          #37d996;
  --good-dim:      rgba(55,217,150,0.14);
  --warn:          #f2b338;
  --warn-dim:      rgba(242,179,56,0.14);
  --bad:           #ff5a6a;
  --bad-dim:       rgba(255,90,106,0.14);

  /* Text */
  --text:          #f4f4f8;
  --text-2:        #b6b6c4;
  --text-3:        #7a7a8a;
  --text-4:        #52525f;

  /* Type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;

  /* Radius + shadow */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 60px -10px rgba(236,30,121,0.35);

  --sidebar-w: 244px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Page-wide subtle starfield with a soft vertical fade (not flat black) */
body::before{
  content:'';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,12,20,0.72) 0%, rgba(10,10,17,0.84) 55%, rgba(8,8,14,0.92) 100%),
    url('/assets/starfield.jpg') center/cover no-repeat fixed;
  z-index: -2;
  opacity: 0.95;
}
/* Soft coloured glows bleeding in from the corners, echoing the horizon */
body::after{
  content:'';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(48% 55% at 6% 108%, rgba(236,30,121,0.16), transparent 70%),
    radial-gradient(42% 50% at 100% -8%, rgba(79,159,255,0.10), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select{ font-family: inherit; }

::selection{ background: rgba(236,30,121,0.35); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: 20px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: #2a2a3a; }

/* Utility */
.grad-text{
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* html2canvas can't render background-clip:text — during export, render grad-text
   as a clean solid color instead of an ugly filled gradient box. */
.exporting .grad-text{
  background: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: #ff5aa0 !important; color: #ff5aa0 !important;
}
.mono-num{ font-family: var(--display); font-feature-settings: 'tnum' 1; letter-spacing: -0.02em; }

/* Focus visibility */
:focus-visible{ outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}