/**
 * CameraReady web design tokens — Option A (flat surfaces, no shadows).
 * Canonical values live in `shared/design-tokens.ts`; keep in sync.
 *
 * Link from HTML pages in downstream reskin slices:
 *   <link rel="stylesheet" href="/css/tokens.css">
 */

:root {
  /* Color — Figma Tokens + BRAND.md */
  --cr-color-background: #FAF9F6;
  --cr-color-background-section: #F0EFEB;
  --cr-color-background-card: #FFFFFF;
  --cr-color-text: #1A1A2E;
  --cr-color-text-secondary: #2D2D44;
  --cr-color-text-muted: #555568;
  --cr-color-ink: #0A0A10;
  --cr-color-accent: #D42B20;
  --cr-color-accent-bright: #F03528;
  --cr-color-border: rgba(0, 0, 0, 0.10);
  --cr-color-border-strong: rgba(0, 0, 0, 0.14);

  /* Spacing — 8px grid (px) */
  --cr-space-xs: 4px;
  --cr-space-sm: 8px;
  --cr-space-md: 12px;
  --cr-space-lg: 16px;
  --cr-space-xl: 24px;
  --cr-space-2xl: 32px;
  --cr-space-3xl: 40px;
  --cr-space-4xl: 56px;

  /* Radius (px) */
  --cr-radius-sm: 10px;
  --cr-radius-md: 16px;
  --cr-radius-lg: 24px;
  --cr-radius-pill: 9999px;

  /* Typography — Space Grotesk Bold display per Figma Tokens (KEH-2349) */
  --cr-font-ui: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --cr-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --cr-font-secondary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --cr-font-display-legacy: "Bebas Neue", Impact, "Arial Narrow", sans-serif;

  --cr-font-weight-regular: 400;
  --cr-font-weight-medium: 500;
  --cr-font-weight-semibold: 600;
  --cr-font-weight-bold: 700;

  --cr-font-size-h1: 56px;
  --cr-font-size-h2: 36px;

  --cr-letter-spacing-display: -0.03em;
  --cr-letter-spacing-wordmark: -0.02em;
  --cr-letter-spacing-label: 0.12em;
}