/**
 * WarBrief Design Tokens
 * Mapped from theme Tailwind config + sandbox templates.
 */
:root {
  /* Brand */
  --wb-color-primary: #000000;
  --wb-color-secondary: #bb0112;
  --wb-color-secondary-hover: #e00218;
  --wb-color-accent: #ff1a2e;

  /* Surfaces */
  --wb-color-surface: #f8f9fc;
  --wb-color-surface-muted: #f4f5f7;
  --wb-color-surface-elevated: #ffffff;
  --wb-color-surface-dark: #191c1e;
  --wb-color-surface-darker: #0f172a;

  /* Text */
  --wb-color-text: #191c1e;
  --wb-color-text-muted: #4c4546;
  --wb-color-text-subtle: #7e7576;
  --wb-color-text-inverse: #ffffff;

  /* Borders */
  --wb-color-border: #191c1e;
  --wb-color-border-muted: #e1e2e5;
  --wb-color-border-soft: #cfc4c5;

  /* Typography */
  --wb-font-sans: Inter, system-ui, sans-serif;
  --wb-font-serif: "Source Serif 4", Georgia, serif;
  --wb-font-mono: "Geist Mono", ui-monospace, monospace;

  /* Layout */
  --wb-max-width: 1320px;
  --wb-max-width-article: 720px;
  --wb-header-height: 64px;
  --wb-logo-size: 2.25rem;

  /* Spacing scale */
  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 20px;
  --wb-space-6: 24px;
  --wb-space-7: 28px;
  --wb-space-8: 32px;
  --wb-space-9: 40px;
  --wb-space-10: 48px;
  --wb-space-11: 56px;
  --wb-space-12: 72px;

  --wb-gutter: 20px;
  --wb-gutter-lg: 32px;
  --wb-gap-grid: 24px;
  --wb-gap-grid-lg: 32px;
  --wb-gap-layout: 32px;
  --wb-gap-layout-lg: 48px;
  --wb-gap-stack: 20px;

  --wb-space-hero-y: 48px;
  --wb-space-hero-y-lg: 64px;
  --wb-space-section-y: 48px;
  --wb-space-section-y-lg: 80px;

  /* Elevation */
  --wb-shadow-sm: 3px 3px 0 var(--wb-color-border);
  --wb-shadow-md: 5px 5px 0 var(--wb-color-border);
  --wb-shadow-lg: 6px 6px 0 var(--wb-color-border);
  --wb-shadow-hover: 7px 7px 0 var(--wb-color-secondary);

  /* Motion */
  --wb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wb-duration-fast: 150ms;
  --wb-duration: 220ms;

  /* Z-index */
  --wb-z-header: 50;
  --wb-z-sticky: 40;
  --wb-z-drawer: 200;
  --wb-z-overlay: 190;
}

@media (min-width: 768px) {
  :root {
    --wb-gutter: 24px;
    --wb-gap-grid: 28px;
    --wb-gap-layout: 36px;
    --wb-space-hero-y: 56px;
    --wb-space-section-y: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --wb-gutter: var(--wb-gutter-lg);
    --wb-gap-grid: var(--wb-gap-grid-lg);
    --wb-gap-layout: var(--wb-gap-layout-lg);
    --wb-space-hero-y: var(--wb-space-hero-y-lg);
    --wb-space-section-y: var(--wb-space-section-y-lg);
    --wb-logo-size: 2.75rem;
  }
}