/* =============================================================
   FRACTO SERVICES — Foundations: Color + Type
   Sampled from the brand board artwork (hex values corrected
   to match the printed swatches, not the mislabeled codes).
   Load once, then use the semantic vars in components.
   ============================================================= */

/* ----- Fonts (Google Fonts; flagged substitutions, see README) ----- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- BRAND / AURA PALETTE ---------- */
  --aura-magenta: #FF1893;   /* primary brand accent */
  --aura-violet:  #9C64FF;   /* secondary accent     */
  --cyan:         #49EEF4;   /* tertiary accent      */

  /* tints / shades for hover & wash use */
  --magenta-soft: #FF5CB0;
  --violet-soft:  #B98DFF;
  --cyan-soft:    #8BF4F8;

  /* signature gradient (the constellation runs violet→magenta→cyan) */
  --aura-gradient: linear-gradient(96deg, var(--aura-violet) 0%, var(--aura-magenta) 48%, var(--cyan) 100%);
  --aura-gradient-soft: linear-gradient(96deg, #9C64FF22 0%, #FF189322 48%, #49EEF422 100%);

  /* ---------- COOL NAVY NEUTRALS (dark) ---------- */
  --navy-950: #080B1A;
  --navy-900: #0C1126;   /* deepest panel */
  --navy-850: #101733;
  --navy-800: #141A32;   /* PRIMARY dark surface (board swatch) */
  --navy-700: #1B2444;
  --navy-600: #28335C;
  --navy-500: #3A477A;

  /* ---------- LIGHT / MIST NEUTRALS ---------- */
  --paper:    #FFFFFF;
  --mist-50:  #F4F6FA;   /* PRIMARY light surface */
  --mist-100: #E9EDF2;
  --mist-200: #D9E0EA;
  --mist-300: #C2CBDA;

  /* ---------- TEXT NEUTRALS ---------- */
  --slate-700: #2B3247;
  --slate-600: #444C63;
  --slate-500: #6B7388;
  --slate-400: #8A93A8;
  --slate-300: #AAB2C4;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE (fluid-ish, px) ---------- */
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-eyebrow: 13px;
  --fs-caption: 12px;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.22em;
  --tracking-display: -0.02em;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(12,17,38,.08), 0 1px 3px rgba(12,17,38,.06);
  --shadow-md: 0 6px 18px rgba(12,17,38,.10), 0 2px 6px rgba(12,17,38,.06);
  --shadow-lg: 0 24px 60px rgba(12,17,38,.16), 0 8px 20px rgba(12,17,38,.08);
  /* neon glows for dark surfaces */
  --glow-magenta: 0 0 0 1px rgba(255,24,147,.35), 0 8px 30px rgba(255,24,147,.30);
  --glow-cyan:    0 0 0 1px rgba(73,238,244,.35), 0 8px 30px rgba(73,238,244,.28);
  --glow-violet:  0 0 0 1px rgba(156,100,255,.35), 0 8px 30px rgba(156,100,255,.28);

  /* ---------- DEFAULT SEMANTIC (LIGHT THEME) ---------- */
  --bg: var(--mist-50);
  --surface: var(--paper);
  --surface-2: var(--mist-100);
  --fg: var(--navy-900);
  --fg-muted: var(--slate-500);
  --fg-subtle: var(--slate-400);
  --border: var(--mist-200);
  --border-strong: var(--mist-300);
  --accent: var(--aura-magenta);
  --accent-fg: #ffffff;
  --ring: rgba(255,24,147,.35);
}

/* ---------- DARK THEME ---------- */
.theme-dark, [data-theme="dark"] {
  --bg: var(--navy-900);
  --surface: var(--navy-800);
  --surface-2: var(--navy-700);
  --fg: #F3F5FB;
  --fg-muted: #A9B2C9;
  --fg-subtle: #6E7794;
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --accent: var(--cyan);
  --accent-fg: var(--navy-900);
  --ring: rgba(73,238,244,.40);
}

/* =============================================================
   SEMANTIC TYPOGRAPHY HELPERS
   ============================================================= */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.018em; }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.015em; }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; }
h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; }
.body-lg { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body, p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }
.small { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; }
.mono { font-family: var(--font-mono); }

/* gradient text utility (the aura wash) */
.aura-text {
  background: var(--aura-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}