/* ============================================================================
   STARSTALKING — Celestial design system
   Forked from Xten Pro tokens: same type (Space Grotesk / Inter / JetBrains
   Mono), same radii + soft shadows + 4pt spacing + § mono-marker device.
   Recolored to a cosmic surface: deep indigo-violet canvas, gold accent,
   cream "paper" report surfaces. A [data-theme="cream"] flip lightens the app.
============================================================================ */
/* ---------------------------------------------------------------------------
   Self-hosted fonts (Space Grotesk + JetBrains Mono + Inter).
   Bundled locally so the design renders identically without depending on the
   Google Fonts CDN — which is often blocked/slow on the target audience's
   networks. latin + latin-ext subsets cover the UI; the browser only fetches
   latin-ext when a glyph needs it (via unicode-range).
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}

/* Space Grotesk 400 */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/SpaceGrotesk-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/SpaceGrotesk-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Space Grotesk 500 */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/SpaceGrotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/SpaceGrotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Space Grotesk 600 */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/SpaceGrotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/SpaceGrotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Space Grotesk 700 */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/SpaceGrotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/SpaceGrotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* JetBrains Mono 400 */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/JetBrainsMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* JetBrains Mono 500 */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/JetBrainsMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/JetBrainsMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* JetBrains Mono 600 */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/JetBrainsMono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/JetBrainsMono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---- VIOLET — primary (the cosmic brand hue) ---- */
  --violet-50:  #F1ECFF;
  --violet-100: #E3D8FE;
  --violet-200: #C9B6FD;
  --violet-300: #AC8FFA;
  --violet-400: #9670F4;
  --violet-500: #8B5CF6;  /* primary */
  --violet-600: #7642E8;
  --violet-700: #5B30C0;
  --violet-800: #432396;
  --violet-900: #2E1769;

  /* ---- GOLD — accent (planetary / auspicious) ---- */
  --gold-50:  #FCF4DD;
  --gold-100: #F9E7B6;
  --gold-200: #F5D788;
  --gold-300: #F1C95F;
  --gold-400: #ECBC44;  /* accent */
  --gold-500: #E0A52F;
  --gold-600: #C2851F;
  --gold-700: #97640F;

  /* ---- COSMOS — dark canvas ---- */
  --cosmos-950: #06040F;
  --cosmos-900: #0A0717;  /* page bg */
  --cosmos-850: #0F0B1F;
  --cosmos-800: #151029;  /* raised panel */
  --cosmos-700: #1D1638;  /* card on dark */
  --cosmos-600: #29204C;  /* hairline fill */
  --cosmos-line: rgba(200,180,255,0.10);
  --cosmos-line-strong: rgba(200,180,255,0.20);
  --star-1: #F4F0FC;  /* primary text on dark */
  --star-2: #B7AED2;  /* secondary */
  --star-3: #7E769A;  /* muted / labels */

  /* ---- CREAM — light "paper" surfaces (reports, light mode) ---- */
  --cream:      #FAF5EA;
  --cream-sunk: #F1E9D7;
  --paper:      #FFFDF8;
  --paper-2:    #FBF7EE;
  --line:        #E7DEC9;
  --line-strong: #D8CBAE;
  --ink-900: #1C1430;   /* headings on cream */
  --ink-800: #2A2042;
  --ink-700: #41385A;   /* body on cream */
  --ink-600: #5C5276;
  --ink-500: #786E92;   /* muted */
  --ink-400: #9D94B3;   /* placeholder */
  --ink-300: #C4BCD4;

  /* ---- SEMANTIC (muted, paired with tint chips) ---- */
  --success:    #1F9D6B;  --success-bg: #E5F5EE;  --success-fg: #0E6B47;
  --warning:    #E0901A;  --warning-bg: #FCEFD6;  --warning-fg: #8A5707;
  --danger:     #E5484D;  --danger-bg:  #FCE7E8;  --danger-fg:  #A21B25;
  --info:       #5B8DEF;  --info-bg:    #E9F0FE;  --info-fg:    #2A56B5;

  /* ---- GRADIENTS ---- */
  --grad-violet: linear-gradient(152deg, #9670F4 0%, #5B30C0 100%);
  --grad-gold:   linear-gradient(152deg, #F1C95F 0%, #C2851F 100%);
  /* the brand fusion — violet rising into gold (used on the mark & key glows) */
  --grad-aurora: linear-gradient(135deg, #8B5CF6 0%, #AC8FFA 38%, #ECBC44 100%);
  --grad-cosmos: radial-gradient(125% 115% at 82% -12%, #2A1B57 0%, #140C2E 38%, #0A0717 72%);
  --grad-panel:  linear-gradient(180deg, rgba(139,92,246,0.06), rgba(139,92,246,0) 60%);

  /* ---- TYPE ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-display: 4rem;  --fs-h1: 3rem;   --fs-h2: 2.25rem; --fs-h3: 1.625rem;
  --fs-h4: 1.25rem;    --fs-h5: 1.0625rem; --fs-body: 1rem; --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;    --fs-label: 0.6875rem;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.6;

  /* ---- RADII / ELEVATION / SPACING (from Xten) ---- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --r-2xl: 28px; --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(12,8,28,0.06);
  --shadow-sm: 0 1px 3px rgba(12,8,28,0.08), 0 1px 2px rgba(12,8,28,0.04);
  --shadow-md: 0 6px 16px rgba(12,8,28,0.10), 0 2px 4px rgba(12,8,28,0.05);
  --shadow-lg: 0 16px 40px rgba(12,8,28,0.14), 0 4px 10px rgba(12,8,28,0.06);
  --shadow-violet: 0 10px 28px rgba(91,48,192,0.40);
  --shadow-gold:   0 10px 26px rgba(194,133,31,0.34);
  --shadow-cosmos: 0 18px 48px rgba(0,0,0,0.55);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur: 180ms;

  /* ---- APP THEME TOKENS (default = cosmic) ---- */
  --app-bg:        var(--cosmos-900);
  --app-surface:   var(--cosmos-700);
  --app-surface-2: var(--cosmos-800);
  --app-line:      var(--cosmos-line);
  --app-line-strong: var(--cosmos-line-strong);
  --app-fg:        var(--star-1);
  --app-fg-2:      var(--star-2);
  --app-fg-3:      var(--star-3);
  --app-field-bg:  rgba(255,255,255,0.03);
}

/* ---- CREAM (light) APP THEME ---- */
[data-theme="cream"] {
  --app-bg:        var(--cream);
  --app-surface:   var(--paper);
  --app-surface-2: var(--paper-2);
  --app-line:      var(--line);
  --app-line-strong: var(--line-strong);
  --app-fg:        var(--ink-900);
  --app-fg-2:      var(--ink-600);
  --app-fg-3:      var(--ink-500);
  --app-field-bg:  #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--cosmos-900);
  color: var(--star-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }
h1,h2,h3,h4,h5 { margin: 0; }
p { margin: 0; }
button { font-family: inherit; }
/* The prototype used <div onClick>/<button> for every interactive element, so it
   never needed an anchor reset. The PHP build renders real <a> links (cards, nav,
   brand) — without this, the UA's underline + link color leak into headings like
   the service-card titles. All links here are styled components, so inherit + none. */
a { color: inherit; text-decoration: none; }
::selection { background: rgba(139,92,246,0.35); }

/* ---- type helpers ---- */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-400); }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  line-height: var(--lh-tight); }
.mono { font-family: var(--font-mono); }

/* ---- starfield (sparse, tasteful) ---- */
.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.starfield i { position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--tw,4s) ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: var(--o,.5); } 50% { opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .starfield i { animation: none; } }

/* ---- focus ---- */
:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }