/* Geogram design tokens — v1 (canonical, served by Geogram.Web).
   Mirror of ui/design-system/tokens.css; the UI-PRE source remains the
   design reference. Brand-name-agnostic; values change at NAMING cutover.
   Offline-safe: system font stack only, no external assets. */

:root {
  /* ---- brand / navy ---- */
  --navy-900: #042c53;
  --navy-700: #0c447c;
  --navy-600: #185fa5;
  --navy-400: #378add;
  --navy-300: #85b7eb;
  --navy-200: #b5d4f4;
  --navy-100: #e6f1fb;

  /* ---- verdict semantics ---- */
  --green-900: #14532d;
  --green-700: #15803d;
  --green-100: #dcfce7;
  --red-900: #7f1d1d;
  --red-700: #b91c1c;
  --red-100: #fee2e2;
  --amber-900: #78350f;
  --amber-700: #b45309;
  --amber-100: #fef3c7;

  /* ---- neutrals ---- */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --line-300: #cbd5e1;
  --line-200: #e2e8f0;
  --bg-100: #f1f5f9;
  --bg-50: #f8fafc;
  --white: #ffffff;

  /* ---- semantic aliases ---- */
  --color-bg: var(--bg-50);
  --color-surface: var(--white);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-700);
  --color-text-faint: var(--ink-500);
  --color-border: var(--line-200);
  --color-border-strong: var(--line-300);
  --color-brand: var(--navy-700);
  --color-brand-strong: var(--navy-900);
  --color-link: var(--navy-600);
  --color-focus: var(--navy-400);

  --verdict-ok-bg: var(--green-100);
  --verdict-ok-fg: var(--green-900);
  --verdict-ok-strong: var(--green-700);
  --verdict-stop-bg: var(--red-100);
  --verdict-stop-fg: var(--red-900);
  --verdict-stop-strong: var(--red-700);
  --verdict-warn-bg: var(--amber-100);
  --verdict-warn-fg: var(--amber-900);
  --verdict-warn-strong: var(--amber-700);

  /* ---- typography (system stack: offline-safe) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --lh-body: 1.6;
  --lh-tight: 1.25;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- spacing (4px scale) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ---- shape & elevation ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-raised: 0 4px 12px rgba(15, 23, 42, 0.1);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;

  /* ---- layout ---- */
  --container: 72rem;
  --container-narrow: 46rem;
  --touch-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}

.on-navy {
  --color-surface: var(--navy-900);
  --color-text: var(--navy-100);
  --color-text-muted: var(--navy-200);
  --color-text-faint: var(--navy-300);
  --color-border: rgba(133, 183, 235, 0.25);
  --color-link: var(--navy-200);
}