/* =========================================
   DESIGN TOKENS — Bauhaus Dark Minimal
   ========================================= */

:root {
  /* --- Colors --- */
  --color-bg: #121212;
  --color-surface: #1a1a1a;
  --color-surface-alt: #1e1e2a;
  --color-blue-deep: #0d1f4a;
  --color-blue-mid: #0a2566;
  --color-blue-border: #1a3a8a;
  --color-accent: #ff4500;
  --color-accent-dim: #cc3700;
  --color-text-primary: #f2f2f2;
  --color-text-secondary: #b5b5b5;
  --color-text-muted: #8d8d8d;
  --color-border: #2a2a2a;
  --color-border-bright: #3a3a3a;

  /* --- Typography --- */
  --font-display: 'Josefin Sans', 'Futura', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* --- Type Scale --- */
  --text-hero: clamp(2.15rem, 10.5vw, 8.25rem);
  --text-display: clamp(2.15rem, 4.2vw, 4.25rem);
  --text-heading: clamp(1.75rem, 3vw, 2.5rem);
  --text-subheading: clamp(1.25rem, 2vw, 1.75rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  /* --- Line Heights --- */
  --leading-tight: 0.9;
  --leading-snug: 1.1;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* --- Letter Spacing --- */
  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.25em;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-narrow: 800px;
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2vw, 1.5rem);
  --section-padding: clamp(3.5rem, 7vw, 7rem);
  --header-height: 4.5rem;

  /* --- Borders --- */
  --radius-none: 0;
  --radius-full: 9999px;
  --border-thin: 2px;
  --border-thick: 4px;
  --border-heavy: 6px;

  /* --- Shadows (hard, no blur — Bauhaus) --- */
  --shadow-card: 4px 4px 0 0 var(--color-border-bright);
  --shadow-card-hover: 6px 6px 0 0 var(--color-accent);
  --shadow-button: 3px 3px 0 0 var(--color-text-primary);
  --shadow-button-active: 1px 1px 0 0 var(--color-text-primary);

  /* --- Transitions --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-reveal: 700ms;
}