/* WhiteFang design tokens — mirrors app globals.css */

/* ── Dark mode (default) ─────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-deepest:  #080E1C;
  --bg-dark:     #0D1628;
  --bg-card:     #111D30;
  --bg-elevated: #182240;
  --bg-input:    #0F1A2E;

  /* Borders */
  --border:        rgba(255,255,255,0.07);
  --border-med:    rgba(255,255,255,0.12);
  --border-sub:    rgba(255,255,255,0.05);
  --border-strong: rgba(255,255,255,0.18);

  /* Surface overlays */
  --surface-1: rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.06);
  --surface-3: rgba(255,255,255,0.08);
  --surface-4: rgba(255,255,255,0.10);

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: #B0CBEA;
  --text-tertiary:  #7A9DBD;

  /* Accents */
  --teal:         #0FCCB0;
  --teal-dim:     rgba(15,204,176,0.12);
  --teal-border:  rgba(15,204,176,0.25);
  --blue:         #2563EB;
  --blue-bright:  #3B82F6;
  --blue-dim:     rgba(59,130,246,0.12);
  --blue-border:  rgba(59,130,246,0.25);
  --purple:       #A855F7;
  --purple-dark:  #7C3AED;
  --gold:         #F59E0B;
  --green:        #10B981;
  --red:          #EF4444;

  /* Fonts */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', monospace;

  /* Type scale */
  --fs-display-1: clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
  --fs-display-2: clamp(2rem, 3.5vw + 0.25rem, 3.25rem);
  --fs-h1:        clamp(1.625rem, 2.5vw + 0.25rem, 2.5rem);
  --fs-h2:        clamp(1.25rem, 1.5vw + 0.25rem, 1.875rem);
  --fs-h3:        1.1875rem;
  --fs-h4:        1rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      0.9375rem;
  --fs-body-sm:   0.8125rem;
  --fs-label:     0.6875rem;

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.65;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-label:   0.08em;

  /* Spacing (4px base) */
  --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;
  --sp-32: 128px;

  /* Layout */
  --container-max:   1280px;
  --container-sm:     760px;
  --gutter:           24px;
  --gutter-mobile:    16px;

  /* Section padding */
  --section-py:      96px;
  --section-py-sm:   64px;
  --section-py-hero: 120px;

  /* Nav */
  --nav-height:        68px;
  --nav-height-sticky: 56px;

  /* Radius */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-glow-teal: 0 0 40px rgba(15,204,176,0.15);
  --shadow-glow-blue: 0 0 40px rgba(59,130,246,0.15);
  --shadow-dropdown: 0 8px 32px rgba(0,0,0,0.5);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 180ms;
  --duration-fast: 120ms;
  --duration-slow: 350ms;
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-deepest:  #E8EDF5;
  --bg-dark:     #F4F7FB;
  --bg-card:     #FFFFFF;
  --bg-elevated: #EEF2FA;
  --bg-input:    #F0F4FA;

  --border:        rgba(10,22,40,0.10);
  --border-med:    rgba(10,22,40,0.18);
  --border-sub:    rgba(10,22,40,0.06);
  --border-strong: rgba(10,22,40,0.22);

  --surface-1: rgba(10,22,40,0.03);
  --surface-2: rgba(10,22,40,0.05);
  --surface-3: rgba(10,22,40,0.07);
  --surface-4: rgba(10,22,40,0.09);

  --text-primary:   #0A1628;
  --text-secondary: #3A5880;
  --text-tertiary:  #5A7899;

  --shadow-card: 0 4px 24px rgba(10,22,40,0.10);
  --shadow-dropdown: 0 8px 32px rgba(10,22,40,0.15);
}

@media (max-width: 768px) {
  :root {
    --section-py:      64px;
    --section-py-hero: 80px;
    --gutter:          16px;
  }
}