@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,100,500;0,100,600;0,100,700;0,100,800;0,100,900;1,125,900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* F45 operational type system: one working face, one restrained display face. */
  --font-ui: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Archivo, Manrope, system-ui, sans-serif;
  /* F1/F2: numeric displays retain their existing face; remove the unused data family. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* F4: keep the single import unchanged. CSS uses loaded weights (650 -> 700,
     750/820/825/850 -> 800); Manrope UI weights stop at 800, while the
     loaded Archivo 900 display and italic weights are preserved. */
  --text-micro: 0.625rem;
  --text-caption: 0.6875rem;
  --text-body-sm: 0.75rem;
  --text-body: 0.8125rem;
  --text-title-sm: 1rem;
  --text-title: 1.25rem;
  --text-page: clamp(1.35rem, 1.1rem + 0.55vw, 1.75rem);

  /* Four-pixel sizing rhythm shared by layout, controls, and responsive flow. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --control-compact: 32px;
  --control-default: 36px;
  --control-touch: 40px;
  --content-gap: clamp(12px, 1.25vw, 20px);

  /* One motion language: fast feedback, standard state change, deliberate entry. */
  --motion-fast: 120ms;
  --motion-standard: 160ms;
  --motion-enter: 220ms;
  --ease-standard: cubic-bezier(.2, .75, .25, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  --navy: #1a1a4e;
  --navy-2: #14123d;
  --red: #e2001a;
  --bg: #eef0f5;
  --topbar: #f7f8fb;
  --card: #ffffff;
  --ink: #18192f;
  --muted: #6f7489;
  --border: #e4e6ee;
  --green: #4b7d5b;
  --amber: #d98324;
  --danger: #d0263a;
  /* Ordered data-visualization scale; keep charts inside the brand spectrum. */
  --data-scale-1: var(--navy);
  --data-scale-2: color-mix(in srgb, var(--navy) 72%, var(--red));
  --data-scale-3: color-mix(in srgb, var(--navy) 50%, var(--red));
  --data-scale-4: color-mix(in srgb, var(--navy) 28%, var(--red));
  --data-scale-5: var(--red);
  --shadow: 0 4px 12px rgba(20, 18, 44, 0.06);
  --row-template: minmax(150px, 1.15fr) minmax(120px, 1fr) minmax(120px, 1fr) max-content;
  /* Radius scale — inputs/chips → sub-cards → cards. Adopt progressively. */
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  /* Shadow scale */
  --shadow-sm: 0 2px 8px rgba(20, 18, 44, 0.05);
  --shadow-lg: 0 10px 28px rgba(20, 18, 44, 0.10);
  /* Skeleton shimmer */
  --skeleton-base: #e9ebf1;
  --skeleton-shine: #f3f4f8;
}