/* ==========================================================================
   Darwin Dating — Design Tokens
   Dark-first genomics dating platform. Feeld-inspired neon-on-void palette.
   Space Grotesk for display, Inter for UI, JetBrains Mono for genetic data.
   ========================================================================== */

:root {
  /* ---------- Void scale (backgrounds, darkest to lightest) ---------- */
  --color-void:          #08080C;
  --color-surface:       #111118;
  --color-elevated:      #1A1A24;
  --color-well:          #0D0D12;

  /* ---------- Border scale ---------- */
  --color-border:        #2A2A38;
  --color-border-subtle: #1E1E2A;

  /* ---------- Text scale ---------- */
  --color-text:          #EEEEF2;
  --color-text-secondary: #8888A0;
  --color-text-tertiary:  #555568;

  /* ---------- Accent: Helix (primary — DNA green, evolution, life) ---------- */
  --color-helix:         #C8FF00;
  --color-helix-hover:   #B0E000;
  --color-helix-dim:     #2A3D00;
  --color-helix-faint:   rgba(200, 255, 0, 0.06);

  /* ---------- Accent: Bond (attraction — chemistry, match, heat) ---------- */
  --color-bond:          #FF2D78;
  --color-bond-hover:    #E0205F;
  --color-bond-dim:      #3D0020;
  --color-bond-faint:    rgba(255, 45, 120, 0.06);

  /* ---------- Accent: Signal (scores — warmth, compatibility) ---------- */
  --color-signal:        #FF9500;
  --color-signal-hover:  #E08200;
  --color-signal-dim:    #3D2500;
  --color-signal-faint:  rgba(255, 149, 0, 0.06);

  /* ---------- Accent: Strand (data — science, cold truth) ---------- */
  --color-strand:        #00D4FF;
  --color-strand-hover:  #00B8E0;
  --color-strand-dim:    #003D4D;
  --color-strand-faint:  rgba(0, 212, 255, 0.06);

  /* ---------- White alpha scale ---------- */
  --white-5:  rgba(255, 255, 255, 0.05);
  --white-8:  rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.20);
  --white-30: rgba(255, 255, 255, 0.30);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-50: rgba(255, 255, 255, 0.50);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-70: rgba(255, 255, 255, 0.70);
  --white-80: rgba(255, 255, 255, 0.80);
  --white-90: rgba(255, 255, 255, 0.90);

  /* ---------- Void alpha scale (cool-tinted overlays) ---------- */
  --void-10: rgba(8, 8, 12, 0.10);
  --void-20: rgba(8, 8, 12, 0.20);
  --void-30: rgba(8, 8, 12, 0.30);
  --void-40: rgba(8, 8, 12, 0.40);
  --void-50: rgba(8, 8, 12, 0.50);
  --void-60: rgba(8, 8, 12, 0.60);
  --void-70: rgba(8, 8, 12, 0.70);
  --void-80: rgba(8, 8, 12, 0.80);
  --void-90: rgba(8, 8, 12, 0.90);

  /* ---------- Fluid typography ---------- */
  --text-xs:      clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);
  --text-sm:      clamp(0.8125rem, 0.77rem + 0.24vw, 0.875rem);
  --text-base:    clamp(0.9375rem, 0.88rem + 0.30vw, 1.0625rem);
  --text-lg:      clamp(1.125rem,  1.03rem + 0.48vw, 1.3125rem);
  --text-xl:      clamp(1.375rem,  1.22rem + 0.73vw, 1.6875rem);
  --text-2xl:     clamp(1.75rem,   1.51rem + 1.09vw, 2.25rem);
  --text-3xl:     clamp(2.25rem,   1.87rem + 1.82vw, 3.125rem);
  --text-display: clamp(3rem,      2.27rem + 3.64vw, 4.5rem);

  /* ---------- Font families ---------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Section spacing (fluid) ---------- */
  --section-xs: clamp(2rem,    1.5rem + 2.42vw,  3rem);
  --section-sm: clamp(3rem,    2.27rem + 3.64vw,  4.5rem);
  --section-md: clamp(4rem,    2.91rem + 5.45vw,  6.5rem);
  --section-lg: clamp(5rem,    3.64rem + 6.79vw,  8rem);
  --section-xl: clamp(6rem,    4.36rem + 8.48vw, 10rem);

  /* ---------- Border radius ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 40px;
  --radius-full: 9999px;

  /* ---------- Shadows (cool-tinted for dark theme) ---------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-helix:  0 0 20px rgba(200, 255, 0, 0.15);
  --shadow-glow-bond:   0 0 20px rgba(255, 45, 120, 0.15);
  --shadow-glow-signal: 0 0 20px rgba(255, 149, 0, 0.15);
  --shadow-glow-strand: 0 0 20px rgba(0, 212, 255, 0.15);

  /* ---------- Transitions ---------- */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --max-width:        1200px;
  --max-width-narrow:  800px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}