/* ===========================
   VARIABLES — TYPESET
=========================== */

:root {
  /* Typography */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --max-width: 1400px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --border-width: 1.5px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* LIGHT THEME */
[data-theme="light"] {
  --color-bg: #f5f2ec;
  --color-bg-alt: #ede9e0;
  --color-surface: #eae6dc;
  --color-border: #1a1a1a;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5a5a;
  --color-text-faint: #9a9a9a;
  --color-accent: #c8392b;
  --color-accent-hover: #a02e22;
  --color-inverse-bg: #1a1a1a;
  --color-inverse-text: #f5f2ec;
  --card-bg: #f5f2ec;
  --card-bg-alt: #1a1a1a;
  --card-text-alt: #f5f2ec;

  /* Visual block colors */
  --visual-striped-bg: #1a1a1a;
  --visual-striped-text: #f5f2ec;
  --visual-grid-bg: #c8392b;
  --visual-grid-text: #f5f2ec;
  --visual-bold-bg: #f5f2ec;
  --visual-bold-text: #1a1a1a;
  --visual-dots-bg: #eae6dc;
  --visual-dots-text: #1a1a1a;
}

/* DARK THEME */
[data-theme="dark"] {
  --color-bg: #0e0e0e;
  --color-bg-alt: #161616;
  --color-surface: #1e1e1e;
  --color-border: #e8e4db;
  --color-text: #e8e4db;
  --color-text-muted: #a0a0a0;
  --color-text-faint: #606060;
  --color-accent: #e8523f;
  --color-accent-hover: #ff6b56;
  --color-inverse-bg: #e8e4db;
  --color-inverse-text: #0e0e0e;
  --card-bg: #0e0e0e;
  --card-bg-alt: #e8e4db;
  --card-text-alt: #0e0e0e;

  --visual-striped-bg: #e8e4db;
  --visual-striped-text: #0e0e0e;
  --visual-grid-bg: #e8523f;
  --visual-grid-text: #0e0e0e;
  --visual-bold-bg: #1e1e1e;
  --visual-bold-text: #e8e4db;
  --visual-dots-bg: #1e1e1e;
  --visual-dots-text: #e8e4db;
}