/* ============================================
   BUDDY MAKER — Design Tokens
   Zenith-derived, dark/light toggle
   ============================================ */
:root {
  /* Colors — Dark (default) */
  --bg: #1A1816;
  --bg-alt: #141210;
  --surface: #22201D;
  --surface-hover: #2D2A26;
  --border: #3D3630;
  --border-subtle: rgba(255,255,255,0.06);
  --text-primary: #E8E2DA;
  --text-secondary: #B8AD9E;
  --text-muted: #8C8078;
  --accent: #C8A064;
  --accent-dim: rgba(200,160,100,0.15);
  --accent-hover: rgba(200,160,100,0.25);
  --success: #7EC896;
  --error: #D4756A;
  --warning: #D4A054;

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: Georgia, 'Playfair Display', serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;

  /* Spacing (4pt grid) */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 64px rgba(0,0,0,0.5);
}

/* Light mode */
html[data-theme="light"] {
  --bg: #F5F2EE;
  --bg-alt: #EDE9E3;
  --surface: #EBE7E1;
  --surface-hover: #E2DDD6;
  --border: #D1C9BE;
  --border-subtle: rgba(0,0,0,0.06);
  --text-primary: #2A2420;
  --text-secondary: #4A4A4A;
  --text-muted: #6B6B6B;
  --accent: #8A6820;
  --accent-dim: rgba(138,104,32,0.1);
  --accent-hover: rgba(138,104,32,0.18);
  --success: #3D8A5A;
  --error: #B8483E;
  --warning: #B08030;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 64px rgba(0,0,0,0.15);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F5F2EE;
    --bg-alt: #EDE9E3;
    --surface: #EBE7E1;
    --surface-hover: #E2DDD6;
    --border: #D1C9BE;
    --border-subtle: rgba(0,0,0,0.06);
    --text-primary: #2A2420;
    --text-secondary: #4A4A4A;
    --text-muted: #6B6B6B;
    --accent: #8A6820;
    --accent-dim: rgba(138,104,32,0.1);
    --accent-hover: rgba(138,104,32,0.18);
    --success: #3D8A5A;
    --error: #B8483E;
    --warning: #B08030;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-lg: 0 16px 64px rgba(0,0,0,0.15);
  }
}