/*
 * Design tokens — CR-A116-16 client-app module foundation.
 *
 * Verbatim from the ratified cards (dashboard-r1.html / login-r1.html — both
 * declare an identical :root block; this is the union of the two, no values
 * added or changed). Every shell/login/view stylesheet in this app draws
 * exclusively from these custom properties — no ad hoc colors (the annotation
 * strip on dashboard-r1 flags the OLD "hand-rolled .dashboard-hero /
 * .metric-card CSS, ad hoc gradients" as the defect this replaces).
 *
 * CR-A116-23 (job-sites-godview-r1) added --good/--good-soft below — the
 * only two tokens that card declares which dashboard-r1/login-r1 did not.
 * Values copied verbatim from the frozen card's own :root block; nothing
 * invented.
 */
:root {
  --navy: #13265C;
  --red: #EF4444;
  --blue: #2563EB;
  --blue-deep: #1D4ED8;
  --blue-soft: #EFF6FF;
  --bg: #FFFFFF;
  --bg-app: #F1F5F9;
  --field: #F9FAFB;
  --line: #E2E8F0;
  --line-soft: #F3F4F6;
  --ink: #111827;
  --ink-soft: #374151;
  --muted: #6B7280;
  --faint: #9CA3AF;
  --band: #EEF2F7;
  --violet: #7C3AED;
  --teal: #0D9488;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --amber: #B45309;
  --amber-soft: #FEF3C7;
  --good: #047857;
  --good-soft: #ECFDF5;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --shadow-pop: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.icon {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.icon-lg { width: 20px; height: 20px; }

.loading-screen {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-3); color: var(--muted); font-size: 13px;
}
.loading-screen .brand-mark {
  width: 44px; height: 44px; border-radius: var(--r-md); background: var(--navy);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.loading-screen .brand-mark span { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}