/* Tazers design tokens. Source of truth: docs/brand-reference.md §3 + §4. */
:root {
  /* Core palette */
  --tz-red:        #E51A1A;
  --tz-red-dark:   #B41212;
  --tz-black:      #0A0A0A;
  --tz-cream:      #F5EFE2;
  --tz-paper:      #EDE4D0;
  --tz-shadow:     #1A1208;

  /* Cosmic accents (decorative only, never primary text) */
  --tz-cobalt:     #1B3DDB;
  --tz-emerald:    #1A8F47;
  --tz-magenta:    #E6307D;
  --tz-coral:      #E64A2E;
  --tz-gold:       #F2C94C;
  --tz-violet:     #5C2D91;

  /* Semantic mapping (light contexts) */
  --color-bg:           var(--tz-cream);
  --color-text:         var(--tz-black);
  --color-text-muted:   #5C5249;
  --color-border:       #2A2018;
  --color-link:         var(--tz-red);
  --color-link-hover:   var(--tz-cobalt);
  --color-cta-bg:       var(--tz-red);
  --color-cta-text:     var(--tz-cream);
  --color-cta-bg-hover: var(--tz-black);
  --color-cta-text-hover: var(--tz-red);
  --color-focus-ring:   var(--tz-red);
  --color-selection-bg: var(--tz-red);
  --color-selection-text: var(--tz-cream);

  /* Type */
  --font-display:  'Sansita', 'Cooper Black', 'Sansita Black', Georgia, serif;
  --font-hero:     'Pilowlava', 'Sansita', 'Cooper Black', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale - mobile */
  --fs-display:   56px;
  --fs-hero:      96px;
  --fs-h1:        36px;
  --fs-h2:        28px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      17px;
  --fs-body-lg:   19px;
  --fs-small:     13px;
  --fs-mono:      13px;

  --lh-display:   0.95;
  --lh-hero:      0.85;
  --lh-h1:        1.05;
  --lh-h2:        1.1;
  --lh-body:      1.6;

  /* Header (used by spacer when header is floating) */
  --tz-header-height: 60px;

  /* Grid + spacing */
  --container-max: 1440px;
  --gutter:        16px;
  --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;
  --space-10: 128px;

  /* Radii / borders */
  --radius-button: 4px;
  --border-thin:   1px solid var(--color-border);
  --border-mid:    2px solid var(--color-border);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --fs-display:  120px;
    --fs-hero:     200px;
    --fs-h1:       56px;
    --fs-h2:       40px;
    --fs-h3:       28px;
    --fs-h4:       22px;
    --fs-body:     18px;
    --fs-body-lg:  22px;
    --fs-small:    14px;
    --fs-mono:     14px;
  }
}

/* Dark variant - we flip these on dark sections via [data-tz-mode="dark"] */
[data-tz-mode="dark"] {
  --color-bg:         var(--tz-black);
  --color-text:       var(--tz-cream);
  --color-text-muted: #8A8378;
  --color-border:     #2A2018;
  --color-link:       var(--tz-red);
  --color-link-hover: var(--tz-magenta);
  --color-cta-bg:       var(--tz-red);
  --color-cta-text:     var(--tz-cream);
  --color-cta-bg-hover: var(--tz-cream);
  --color-cta-text-hover: var(--tz-black);
}

/* Reduced-motion users: clamp every animation */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}