/* New CSS should use these custom properties instead of hardcoded values or
   inline styles. See ARCHITECTURE.md's frontend section for the convention.

   Values alias the existing theme palette defined in style.css (:root,
   prefers-color-scheme and [data-theme] blocks), so every token follows the
   light/dark theme automatically — do not put raw hex values here unless the
   value is genuinely theme-independent (radius, spacing, type scale). */
:root {
  /* surfaces */
  --rs-surface-0: var(--bg);          /* warm off-white / deep navy page bg */
  --rs-surface-1: var(--surface);     /* card/panel bg */
  --rs-surface-2: var(--bg-card);     /* raised card (example/tool cards) */
  /* text */
  --rs-text-primary: var(--text);
  --rs-text-secondary: var(--muted);
  --rs-text-accent: var(--accent);    /* gold */
  /* borders */
  --rs-border: var(--border);
  --rs-border-accent: var(--accent);  /* gold border on the active nav pill */
  /* accent */
  --rs-accent: var(--accent);
  --rs-accent-strong: var(--accent-strong);
  --rs-on-accent: var(--on-accent);   /* text on a gold fill */
  --rs-teal: var(--teal);             /* secondary accent */
  --rs-danger: var(--danger);         /* problem eyebrow / warning text */
  /* Light tint of the accent for active-state backgrounds — derived from the
     real accent so it adapts to the theme, not an invented separate color. */
  --rs-accent-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  /* interactive-state colors (DESIGN_SYSTEM.md §2) */
  --rs-accent-hover: color-mix(in srgb, var(--accent) 85%, black);
  --rs-focus-ring: color-mix(in srgb, var(--accent) 25%, transparent);
  /* radius */
  --rs-radius-sm: 8px;
  --rs-radius-pill: 999px;
  /* spacing */
  --rs-space-xs: 4px;
  --rs-space-sm: 8px;
  --rs-space-md: 12px;
  --rs-space-lg: 20px;
  --rs-space-xl: 32px;
  /* type (DESIGN_SYSTEM.md §1) */
  --rs-font-size-caption: 12px;
  --rs-font-size-body: 14px;
  --rs-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rs-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --rs-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --rs-type-display: 2rem;
  --rs-type-headline: 1.35rem;
  --rs-type-subhead: 1.1rem;
  --rs-type-body: 0.95rem;
  --rs-type-caption: 0.85rem;
  --rs-type-micro: 0.78rem;
  /* motion (DESIGN_SYSTEM.md §6) */
  --rs-transition-fast: 120ms ease-out;
  --rs-transition-slow: 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rs-transition-fast: 0s;
    --rs-transition-slow: 0s;
  }
}