/* assets/css/variables.css
 * Design tokens. Single source of truth for color, spacing,
 * typography sizing, and motion. Every other stylesheet reads
 * these and never hardcodes values.
 */

:root {
  /* Color: Arizona sunset, dark mode anchored */
  --ink: #0A0908;
  --ink_2: #14110F;
  --twilight: #1C1B1A;
  --twilight_2: #25221F;
  --bone: #F5F1E8;
  --bone_dim: #B8B0A0;
  --bone_faint: #6E6862;
  --gold: #D4A24C;
  --gold_dim: #8C6A30;
  --gold_glow: rgba(212, 162, 76, 0.35);
  --ember: #C25B3F;
  --crimson: #8B2E20;
  --sage: #6B8E5C;
  --steel: #3B4A5C;

  /* Color: lines and surfaces */
  --grid: rgba(245, 241, 232, 0.04);
  --rule: rgba(245, 241, 232, 0.10);
  --rule_strong: rgba(245, 241, 232, 0.20);

  /* Status */
  --status_pass: var(--sage);
  --status_warn: var(--gold);
  --status_fail: var(--ember);
  --status_crit: var(--crimson);

  /* Typography */
  --font_display: 'Fraunces', 'Times New Roman', serif;
  --font_mono: 'JetBrains Mono', 'Courier New', monospace;
  --font_body: 'Newsreader', Georgia, serif;

  /* Type scale */
  --size_xs: 0.6875rem;
  --size_sm: 0.8125rem;
  --size_base: 1rem;
  --size_md: 1.125rem;
  --size_lg: 1.375rem;
  --size_xl: 1.75rem;
  --size_2xl: 2.5rem;
  --size_3xl: clamp(2.5rem, 6vw, 5rem);
  --size_hero: clamp(3rem, 7vw, 6.5rem);

  /* Spacing */
  --space_1: 4px;
  --space_2: 8px;
  --space_3: 12px;
  --space_4: 16px;
  --space_5: 24px;
  --space_6: 32px;
  --space_7: 48px;
  --space_8: 64px;
  --space_9: 96px;

  /* Layout */
  --max_width: 1400px;
  --gutter: clamp(24px, 4vw, 48px);

  /* Motion */
  --ease_out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease_in_out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration_fast: 200ms;
  --duration_base: 400ms;
  --duration_slow: 800ms;

  /* Borders + shadows */
  --radius_xs: 2px;
  --radius_sm: 4px;
  --shadow_glow: 0 12px 48px rgba(212, 162, 76, 0.15);
  --shadow_panel: 0 24px 80px rgba(0, 0, 0, 0.6);
}