/* ============================================================
   css/variables.css — Design Tokens & Theme Variables
   ============================================================ */

:root {
  /* Brand Colors */
  --yellow:      #F5C518;
  --yellow-dark: #D4A017;
  --black:       #0A0A0A;
  --white:       #FAFAFA;

  /* Grays */
  --gray-100: #F2F2F0;
  --gray-200: #E0DED8;
  --gray-400: #9A9890;
  --gray-600: #5C5A54;
  --gray-800: #2A2926;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-cond:    'Barlow Condensed', sans-serif;

  /* Layout */
  --nav-h:      72px;
  --max-width:  1280px;
  --container-pad: 2rem;

  /* Transitions */
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── DARK THEME (default) ── */
[data-theme="dark"] {
  --bg:         #0A0A0A;
  --bg-surface: #141414;
  --bg-card:    #1C1C1C;

  --text-primary:   #FAFAFA;
  --text-secondary: #9A9890;
  --text-muted:     #5C5A54;

  --border:  #2A2926;
  --nav-bg:  rgba(10, 10, 10, 0.95);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:         #FAFAFA;
  --bg-surface: #F2F2F0;
  --bg-card:    #FFFFFF;

  --text-primary:   #0A0A0A;
  --text-secondary: #5C5A54;
  --text-muted:     #9A9890;

  --border:  #E0DED8;
  --nav-bg:  rgba(250, 250, 250, 0.95);
}