/* ══════════════════════════════════════════════════
   LIGHT MODE - Default CSS variables
══════════════════════════════════════════════════ */
:root {
  --bg:          #FAFAF7;
  --bg-alt:      #F3EDE1;
  --bg-card:     #FFFFFF;
  --bg-card-alt: #FDFAF5;
  --text:        #1C1917;
  --text-2:      #78716C;
  --text-3:      #6B6560;
  --accent:      #D97706;
  --accent-dk:   #B45309;
  --accent-lt:   #FDE68A;
  --accent-bg:   #FFFBEB;
  --accent-text: #92400E;
  --rose:        #BE185D;
  --rose-bg:     #FDF2F8;
  --rose-lt:     #FBCFE8;
  --border:      #E7E5E4;
  --border-2:    #D6D3D1;
  --surface-dk:  #1C1917;
  --surface-dkr: #0D0D0A;
  --nav-bg:      rgba(250,250,247,.92);
  --drawer-bg:   rgba(250,250,247,.97);
  --hero-grid:   rgba(28,25,23,.028);
  --shadow-sm:   0 1px 4px rgba(28,25,23,.06);
  --shadow-md:   0 4px 20px rgba(28,25,23,.09), 0 2px 8px rgba(28,25,23,.05);
  --shadow-lg:   0 16px 48px rgba(28,25,23,.12), 0 6px 20px rgba(28,25,23,.06);
  --shadow-xl:   0 28px 64px rgba(28,25,23,.18);
  --nav-h:  72px;
  --r-sm:   6px;  --r-md:  12px;  --r-lg:  20px;
  --r-xl:  28px;  --r-2xl: 36px;  --r-full: 9999px;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════
   DARK MODE - Override variables
══════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #0F0F0C;
  --bg-alt:      #161612;
  --bg-card:     #1D1D19;
  --bg-card-alt: #232320;
  --text:        #EEEDEA;
  --text-2:      #9C9490;
  --text-3:      #857F7A;
  --accent:      #F59E0B;
  --accent-dk:   #D97706;
  --accent-lt:   #FDE68A;
  --accent-bg:   rgba(245,158,11,.13);
  --accent-text: #F59E0B;
  --rose:        #F472B6;
  --rose-bg:     rgba(244,114,182,.10);
  --rose-lt:     rgba(244,114,182,.28);
  --border:      rgba(255,255,255,.08);
  --border-2:    rgba(255,255,255,.14);
  --surface-dk:  #0A0A08;
  --surface-dkr: #060604;
  --nav-bg:      rgba(15,15,12,.92);
  --drawer-bg:   rgba(15,15,12,.97);
  --hero-grid:   rgba(255,255,255,.04);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.4);
  --shadow-md:   0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.6);
  --shadow-xl:   0 28px 64px rgba(0,0,0,.7);
}