/**
 * Motorwise design tokens — static-page mirror of SPA tokens.css
 *
 * Canonical source (SPA / Tailwind v4 @theme):
 *   frontend/src/styles/tokens.css
 *
 * This file exposes the same values as plain CSS custom properties on :root so
 * CDN Tailwind pages + plain CSS (articles, tools, nav) can share one palette.
 * Do NOT import the SPA file here — @theme is not valid for static CDN pages.
 *
 * Registration plate colours are intentionally non-brand — do not recolour.
 *
 * Keep in sync when SPA tokens change.
 */

:root {
  /* Brand — logo “w” blue */
  --color-brand: #3B82F6;
  --color-brand-hover: #2563EB;
  --color-brand-tint: #EEF4FF;
  --color-brand-tint-border: #D8E4FF;
  --color-brand-range: #DBE6FF;

  /* Accent green — logo underline; positive verdicts only */
  --color-accent: #22C55E;
  --color-accent-deep: #15803D;
  --color-accent-tint: #F0FDF4;
  --color-accent-border: #BBF7D0;

  /* Ink ramp */
  --color-ink: #11161C;
  --color-muted: #5A636E;
  --color-mid: #6B7480;
  --color-faint: #9AA3AD;

  /* Surfaces & borders */
  --color-page: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-chip: #F3F5F7;
  --color-row: #F7F8FA;
  --color-card-border: #EAECEF;
  --color-row-border: #EEF0F3;
  --color-btn-border: #D4D8DE;
  --color-btn-border-hover: #B9BFC7;
  --color-rail: #E8EBEE;
  --color-divider: #E5E7EB;
  --color-subtle: #F5F5F5;

  /* Attention (warning) family */
  --color-attention-bg: #FDF1C8;
  --color-attention-fg: #8A6D00;
  --color-attention-banner: #FEF9E7;
  --color-attention-border: #F5E7A8;
  --color-attention-deep: #7A6400;
  --color-attention-dot: #E0B400;

  /* Registration plate — do not sweep into brand */
  --color-plate-stripe: #1565C0;
  --color-plate-body: #FFC107;
  --color-plate-text: #212121;

  --color-success: #22C55E;
  --color-warning: #E0B400;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  /* Radii */
  --radius-card: 18px;
  --radius-card-sm: 14px;
  --radius-panel: 12px;
  --radius-row: 10px;
  --radius-chip: 7px;
  --radius-badge: 6px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card-hover: 0 6px 20px rgba(17, 22, 28, 0.06);
  --shadow-overlay: 0 4px 16px rgba(16, 24, 40, 0.12), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-nav-top: 0 -2px 10px rgba(16, 24, 40, 0.05);

  /* Spacing (report scaffold) */
  --spacing-card-x: 20px;
  --spacing-card-x-lg: 36px;
  --spacing-card-y: 24px;
  --spacing-card-y-lg: 32px;
  --spacing-left-col: 230px;

  --duration-fast: 200ms;
  --duration-slow: 300ms;

  /* Focus */
  --focus-ring: 2px solid var(--color-brand);
  --focus-ring-offset: 2px;
}