/* Design tokens: the only place raw colours, lengths, shadows, type sizes, z-indexes and timings are
   written. Everything else uses var(--…). tests/p2.js fails on any raw hex, rgb() or px value outside
   this file (1px borders and media-query widths are allowed). */
:root{
  /* Colour. Neutral primary; red only for errors and destructive actions. Every text and
     meaningful non-text pair is measured in both themes by tests/contrast.mjs. */
  color-scheme:light dark;
  --color-bg:#f7f8fa;
  --color-surface:#fff;
  --color-surface-subtle:#f2f4f7;
  --color-surface-accent:#eceff3;
  --color-header-bg:#f7f8fa;
  --color-backdrop:rgba(16,20,28,.5);
  --color-text:#161b26;
  --color-text-muted:#4f5868;
  --color-on-primary:#fff;
  /* Behind the MFA QR code in both themes: authenticator apps need dark modules on a light ground. */
  --color-qr-ground:#fff;
  --color-border:#dde1e7;
  --color-border-control:#7b8494;
  --color-border-strong:#7b8494;
  --color-track:#d3d8e0;
  --color-primary:#1f2633;
  --color-primary-hover:#0f141c;
  --color-primary-text:#1f2633;
  --color-focus:#1d5fd1;
  --color-success-text:#156a3f;
  --color-success-bg:#ebf6ef;
  --color-success-border:#a9d6bb;
  --color-info-text:#1b4f8f;
  --color-info-bg:#ecf3fc;
  --color-info-border:#b6cff0;
  --color-warning-text:#744800;
  --color-warning-bg:#fdf4e3;
  --color-warning-border:#e6c27a;
  --color-danger-text:#b42318;
  --color-danger-bg:#fdefed;
  --color-danger-border:#f0b4ac;
  --color-neutral-text:#424a58;
  --color-neutral-bg:#eceff3;
  /* Brand: taxi yellow, for the logo, the main call to action and the step numbers; icons sit on a
     yellow tint. Never for status or errors. */
  --color-brand:#f5b800;
  --color-brand-hover:#e0a800;
  --color-on-brand:#14181f;
  --color-icon:#7a4f00;
  --color-icon-bg:#fff3cc;

  /* Space: 4/8pt scale */
  --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;

  /* Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;

  /* Borders and focus */
  --border-thick:2px;
  --focus-width:3px;
  --focus-offset:2px;

  /* Shadow */
  --shadow-card:0 10px 35px rgba(16,20,28,.07);
  --shadow-dialog:0 30px 90px rgba(0,0,0,.22);

  /* Typography */
  /* System fonts only. The script faces come first but cover only Devanagari and Gujarati (styles.css),
     so Latin text uses the system UI font and Hindi and Gujarati use Noto Sans where it is installed.
     If a script face does not resolve, each platform's own Indic fonts come before the Noto fallbacks:
     Nirmala UI (Windows), Kohinoor Devanagari and Gujarati Sangam MN (iOS and macOS). */
  --font-sans:"PRI Devanagari","PRI Gujarati",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Noto Sans","Helvetica Neue",Arial,"Nirmala UI","Kohinoor Devanagari","Gujarati Sangam MN",
    "Noto Sans Devanagari","Noto Sans Gujarati",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-md:1rem;
  --text-lg:1.25rem;
  --text-xl:1.375rem;
  --text-2xl:1.75rem;
  --text-3xl:2rem;
  --text-4xl:2.375rem;
  --text-5xl:2.75rem;
  --text-h1:clamp(2.375rem,6vw,4.375rem);
  --text-h2:clamp(1.5rem,3vw,2.25rem);
  --text-icon:1.75rem;
  --text-icon-lg:2.375rem;
  --leading-tight:1.15;
  --leading-heading:1.25;
  --leading-normal:1.55;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:650;
  --weight-bold:750;
  --weight-heavy:800;
  --tracking-tight:-.045em;
  --tracking-snug:-.03em;
  --tracking-caps:.12em;
  /* Devanagari and Gujarati headings: negative tracking breaks conjuncts and the headstroke (F38). */
  --tracking-indic:normal;

  /* Sizes */
  --container:1180px;
  --container-narrow:860px;
  --gutter:16px;
  --header-height:76px;
  --header-height-sm:68px;
  --measure:720px;
  --measure-wide:800px;
  --dialog-width:720px;
  --icon-sm:30px;
  --icon-md:42px;
  --icon-lg:56px;
  --glyph:24px;
  --glyph-sm:20px;
  --thumb:48px;
  --label-col:170px;
  --label-col-sm:130px;
  --step-height:8px;
  --hairline:1px;
  --lift:-1px;
  --lang-select-sm:112px;
  --lang-select-max:220px;
  --target:44px;
  --choice:20px;

  /* Layers */
  --z-header:30;
  --z-skip:100;

  /* Motion (none when the system asks for reduced motion, below) */
  --duration-fast:.16s;
  --scroll-behavior:smooth;
}

/* Dark theme: the same tokens, chosen by the system setting. */
@media (prefers-color-scheme: dark){
  :root{
    --color-bg:#0e1116;
    --color-surface:#161a21;
    --color-surface-subtle:#1b2029;
    --color-surface-accent:#222833;
    --color-header-bg:#0e1116;
    --color-backdrop:rgba(0,0,0,.65);
    --color-text:#e9ecf1;
    --color-text-muted:#a7afbc;
    --color-on-primary:#10141a;
    --color-border:#2c333f;
    --color-border-control:#7c8595;
    --color-border-strong:#7c8595;
    --color-track:#3a4250;
    --color-primary:#e4e8ee;
    --color-primary-hover:#fff;
    --color-primary-text:#e4e8ee;
    --color-focus:#7fb0ff;
    --color-success-text:#7ed6a2;
    --color-success-bg:#12261b;
    --color-success-border:#2c5c40;
    --color-info-text:#93bdfa;
    --color-info-bg:#12203a;
    --color-info-border:#2c4b78;
    --color-warning-text:#f1c46a;
    --color-warning-bg:#2a2010;
    --color-warning-border:#6a5222;
    --color-danger-text:#ff9b90;
    --color-danger-bg:#2f1513;
    --color-danger-border:#74312b;
    --color-neutral-text:#c5cbd5;
    --color-neutral-bg:#262c37;
    --color-brand:#f5b800;
    --color-brand-hover:#ffc933;
    --color-on-brand:#14181f;
    --color-icon:#f5c542;
    --color-icon-bg:#2b2410;
    --shadow-card:0 10px 35px rgba(0,0,0,.35);
    --shadow-dialog:0 30px 90px rgba(0,0,0,.6);
  }
}

/* Reduced motion: no transitions, no hover lift, no smooth scrolling. */
@media (prefers-reduced-motion: reduce){
  :root{
    --duration-fast:0s;
    --lift:0;
    --scroll-behavior:auto;
  }
}