/* ============================================================
   VARIABLES — Aaron Muti Portfolio
   Color tokens, typography, spacing, layout
   ============================================================ */

:root {
  /* Brand Accent Colors */
  --accent-1: #FFBD39;   /* Amber gold — primary brand */
  --accent-2: #FF4D4D;   /* Electric red — CTAs, urgency */
  --accent-3: #00F5A0;   /* Neon mint — skill bars, tech */

  /* Dark Mode (default) */
  --bg-base:        #0A0A0A;
  --bg-surface:     #141414;
  --bg-elevated:    #1E1E1E;
  --bg-card:        #181818;
  --text-primary:   #F5F5F5;
  --text-secondary: #999999;
  --text-muted:     #555555;
  --border-color:   rgba(255, 255, 255, 0.08);
  --shadow:         0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg:      0 12px 48px rgba(0, 0, 0, 0.8);

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --font-body:    'Space Grotesk', -apple-system, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;
  --font-size-base: 16px;
  --line-height: 1.7;

  /* Spacing Scale */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  2rem;     /* 32px */
  --space-lg:  4rem;     /* 64px */
  --space-xl:  6rem;     /* 96px */
  --space-2xl: 10rem;    /* 160px */

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.5rem;
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* Z-index layers */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}

/* ── Light Mode ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:        #F8F8F4;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #EFEFEB;
  --bg-card:        #FFFFFF;
  --text-primary:   #0A0A0A;
  --text-secondary: #555555;
  --text-muted:     #AAAAAA;
  --border-color:   rgba(0, 0, 0, 0.08);
  --shadow:         0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:      0 12px 48px rgba(0, 0, 0, 0.15);
}