/* tokens.css — design system single source of truth (navy/gold finance brand).
 * One palette: the shared site is LIGHT-only, with no prefers-color-scheme switch and
 * no alternative themes (T4-D6). The admin dashboard keeps its own light/dark palette
 * (admin_dashboard.css). The mobile apps' AppColors (design_system tokens.dart) carry
 * the same values. Never rename or remove a token: other surfaces read them by name.
 */

:root {
  /* Brand */
  --brand-primary: #1E3A8A;
  --brand-primary-strong: #1E40AF;
  --brand-primary-soft: rgba(30, 58, 138, 0.08);
  /* The deep end of the navy bands, the brand-coloured shadow, the accent's hover fill
     and its glow (docs/p0/TELLER_CLASSIC_SPEC.md §3.3): today's literals, so the default
     look does not move; a deployment theme (app/theme.py) overrides them with the rest. */
  --brand-primary-deep: #142A63;
  --brand-primary-shadow: rgba(30, 58, 138, 0.30);
  --accent: #F59E0B;
  --accent-strong: #D97706;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --accent-hover: #D97706;
  --accent-glow: rgba(245, 158, 11, 0.22);

  /* Surfaces & background */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-soft: #F8FAFC;
  --surface-strong: #EEF2F7;
  --line: #E2E8F0;
  --line-soft: #EDF1F6;
  /* Form-control borders (input, select, textarea): >= 3:1 on white and --bg. */
  --line-strong: #7B8798;

  /* Text. --muted is AA (>= 4.5:1) on white, --bg and --surface-strong; --muted-soft
     is for hints and placeholders on white or --surface-soft fills only. */
  --ink: #0F172A;
  --ink-soft: #334155;
  --muted: #475569;
  --muted-soft: #64748B;
  --on-brand: #FFFFFF;
  --on-accent: #1F2937;

  /* Status. The bright hues are for fills, borders, bars and large icons only.
     The *-soft tints are opaque (each one is its hue blended over white), so an
     ink keeps one contrast ratio wherever its tint sits. */
  --ok: #10B981;
  --ok-soft: #E2F7F0;
  --warn: #F59E0B;
  --warn-soft: #FEF1DD;
  --err: #EF4444;
  --err-soft: #FDE9E9;
  --info: #0EA5E9;
  --info-soft: #E2F4FC;

  /* Status text ("ink") that keeps WCAG AA (>= 4.5:1) on white, on the page
     background, on --surface-strong and on its own *-soft fill. Every status
     text uses these, never the bright hues above. */
  --ok-ink: #047857;
  --warn-ink: #92400E;
  --err-ink: #B91C1C;
  --info-ink: #0369A1;
  --muted-strong: #475569;

  /* Risk gauge */
  --risk-low: #10B981;
  --risk-med: #F59E0B;
  --risk-high: #EF4444;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Radii */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 999px;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 3px rgba(30, 58, 138, 0.25);

  /* Focus indicator (base.css :focus-visible): a 2px outline, >= 3:1 against the
     page. Inside dark containers (.on-dark) the gold ring is used instead. */
  --focus-ring: var(--brand-primary);
  --focus-ring-on-dark: var(--accent);

  /* Layout */
  --header-h: 56px;
  --bottom-nav-h: 56px;
  --rail-w: 240px;
  --content-max: 1280px;

  /* Breakpoints (referenced via @media custom-properties not supported widely;
   * kept here as documentation and used as fixed values in @media queries below.) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* z-index scale */
  --z-base: 0;
  --z-elev: 10;
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;
  --z-tooltip: 120;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reduced motion (base.css also caps every animation and transition) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}