/* ============================================================
   DIGITAL DNA — DESIGN TOKENS (DARK MODE)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BACKGROUNDS
  ---------------------------------------------------------- */
  --bg-base:       #08080F;
  --bg-surface-1:  #0F0F1A;
  --bg-surface-2:  #16161F;
  --bg-surface-3:  #1E1E2A;

  /* Legacy aliases (referenced in HTML inline styles / old selectors) */
  --bg-primary:    #08080F;
  --bg-surface:    #0F0F1A;
  --bg-card:       #16161F;
  --bg-dark:       #0F0F1A;

  /* ----------------------------------------------------------
     BORDERS
  ---------------------------------------------------------- */
  --border:         rgba(255, 255, 255, 0.07);
  --border-hover:   rgba(255, 255, 255, 0.15);
  --border-teal:    rgba(20, 184, 188, 0.30);
  --border-light:   rgba(255, 255, 255, 0.07);
  --border-medium:  rgba(255, 255, 255, 0.11);

  /* ----------------------------------------------------------
     TEXT
  ---------------------------------------------------------- */
  --text-primary:   #F0F0F5;
  --text-secondary: rgba(240, 240, 245, 0.60);
  --text-light:     rgba(240, 240, 245, 0.45);
  --text-muted:     rgba(240, 240, 245, 0.45);
  --text-inverse:   #08080F;

  /* ----------------------------------------------------------
     ACCENT — TEAL (PRIMARY)
  ---------------------------------------------------------- */
  --accent-teal:        #14B8BC;
  --accent-teal-dark:   #0E9EA2;
  --accent-teal-light:  #3ECFD3;
  --accent-teal-dim:    rgba(20, 184, 188, 0.12);
  --accent-teal-glow:   rgba(20, 184, 188, 0.30);

  /* ----------------------------------------------------------
     ACCENT — PURPLE (SECONDARY)
  ---------------------------------------------------------- */
  --accent-purple:       #8B5CF6;
  --accent-purple-dark:  #7C3AED;
  --accent-purple-light: #A78BFA;
  --accent-purple-dim:   rgba(139, 92, 246, 0.12);
  --accent-purple-glow:  rgba(139, 92, 246, 0.30);

  /* Legacy amber aliases mapped to purple */
  --accent-amber:        #8B5CF6;
  --accent-amber-light:  #A78BFA;

  /* ----------------------------------------------------------
     GRADIENTS
  ---------------------------------------------------------- */
  --accent-gradient:        linear-gradient(135deg, #14B8BC 0%, #8B5CF6 100%);
  --accent-gradient-hover:  linear-gradient(135deg, #0E9EA2 0%, #7C3AED 100%);
  --accent-gradient-text:   linear-gradient(135deg, #14B8BC 0%, #A78BFA 100%);
  --gradient-hero-mesh-1:   rgba(20, 184, 188, 0.14);
  --gradient-hero-mesh-2:   rgba(139, 92, 246, 0.10);
  --gradient-hero-mesh-3:   rgba(79, 70, 229, 0.07);

  /* ----------------------------------------------------------
     GLASS / NOISE
  ---------------------------------------------------------- */
  --glass-bg:       rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border:   rgba(255, 255, 255, 0.09);
  --noise-opacity:  0.025;

  /* ----------------------------------------------------------
     SHADOWS / GLOWS
  ---------------------------------------------------------- */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.50);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.65);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.70);
  --glow-teal:    0 0 32px rgba(20, 184, 188, 0.22), 0 0 8px rgba(20, 184, 188, 0.15);
  --glow-purple:  0 0 32px rgba(139, 92, 246, 0.22), 0 0 8px rgba(139, 92, 246, 0.15);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* ----------------------------------------------------------
     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;

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --max-width:     1160px;
  --content-width: 720px;
  --container-pad: var(--space-6);

  /* ----------------------------------------------------------
     RADIUS
  ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   260ms ease;
  --transition-slow:   420ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     SCROLL PROGRESS (set via JS)
  ---------------------------------------------------------- */
  --scroll-progress: 0;
}