/* OneScore Eswatini — design tokens (generated from tokens.json). Theme via <html data-theme="light|dark">. */
@font-face{font-family:'Sora';src:url('../fonts/Sora-Variable.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-Variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
:root, [data-theme="light"] {
  color-scheme: light;
  --navy-50: #f4f7fb;
  --navy-100: #e9eef5;
  --navy-200: #d5deea;
  --navy-300: #b0bed0;
  --navy-400: #7a8aa2;
  --navy-500: #5f708a;
  --navy-600: #47586f;
  --navy-700: #324259;
  --navy-800: #1f2f48;
  --navy-900: #0f1e34;
  --navy-925: #0b1729;
  --navy-950: #07101d;
  --blue-50: #eef4fe;
  --blue-100: #dce8fd;
  --blue-200: #bcd3fb;
  --blue-300: #8fb6f8;
  --blue-400: #5c95f2;
  --blue-500: #2f76e3;
  --blue-600: #095cd1;
  --blue-700: #0849a6;
  --blue-800: #0a3a80;
  --blue-900: #0c2c5c;
  --teal-50: #eaf7f8;
  --teal-100: #cbecee;
  --teal-200: #9cdbe0;
  --teal-300: #62c4cc;
  --teal-400: #36a9b3;
  --teal-500: #20909a;
  --teal-600: #187780;
  --teal-700: #135f67;
  --teal-800: #114c53;
  --teal-900: #0e3b41;
  --amber-50: #fdf6e6;
  --amber-100: #fae7bd;
  --amber-300: #f2b84a;
  --amber-500: #c98a0e;
  --amber-600: #9a6700;
  --amber-700: #7a5100;
  --ember-50: #fdf0ea;
  --ember-100: #fadacb;
  --ember-300: #ff9363;
  --ember-500: #e05a1f;
  --ember-600: #b83c0c;
  --ember-700: #932f09;
  --surface: var(--navy-50);
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-sunken: var(--navy-100);
  --surface-inverse: var(--navy-900);
  --surface-brand-subtle: var(--blue-50);
  --scrim: #0f1e3466;
  --ink: var(--navy-900);
  --ink-muted: var(--navy-600);
  --ink-subtle: var(--navy-500);
  --ink-inverse: #ffffff;
  --ink-inverse-muted: var(--navy-300);
  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-pressed: var(--blue-800);
  --on-primary: #ffffff;
  --accent: var(--teal-500);
  --accent-ink: var(--teal-700);
  --border: var(--navy-200);
  --border-strong: var(--navy-400);
  --focus-ring: var(--blue-600);
  --status-success: var(--teal-700);
  --status-success-tint: var(--teal-50);
  --status-warning: var(--amber-700);
  --status-warning-tint: var(--amber-50);
  --status-danger: var(--ember-600);
  --status-danger-tint: var(--ember-50);
  --status-info: var(--blue-700);
  --status-info-tint: var(--blue-50);
  --on-danger: #ffffff;
  --score-1: var(--ember-600);
  --score-2: var(--amber-700);
  --score-3: var(--teal-600);
  --score-4: var(--blue-600);
  --score-5: var(--navy-900);
  --shadow-xs: 0 1px 2px rgba(15, 30, 52, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 30, 52, 0.05), 0 2px 8px rgba(15, 30, 52, 0.05);
  --shadow-md: 0 2px 4px rgba(15, 30, 52, 0.04), 0 8px 24px rgba(15, 30, 52, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 30, 52, 0.04), 0 24px 48px rgba(15, 30, 52, 0.14);
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface: var(--navy-950);
  --surface-raised: var(--navy-925);
  --surface-overlay: var(--navy-900);
  --surface-sunken: #050b15;
  --surface-inverse: var(--navy-800);
  --surface-brand-subtle: #0d2547;
  --scrim: #000000a3;
  --ink: var(--navy-50);
  --ink-muted: var(--navy-300);
  --ink-subtle: var(--navy-400);
  --ink-inverse: var(--navy-50);
  --ink-inverse-muted: var(--navy-300);
  --primary: var(--blue-300);
  --primary-hover: var(--blue-200);
  --primary-pressed: var(--blue-100);
  --on-primary: var(--navy-950);
  --accent: var(--teal-300);
  --accent-ink: var(--teal-300);
  --border: #1b2a42;
  --border-strong: var(--navy-500);
  --focus-ring: var(--blue-300);
  --status-success: var(--teal-300);
  --status-success-tint: #123f45;
  --status-warning: var(--amber-300);
  --status-warning-tint: #3a2a08;
  --status-danger: var(--ember-300);
  --status-danger-tint: #40190b;
  --status-info: var(--blue-300);
  --status-info-tint: #0d2547;
  --on-danger: var(--navy-950);
  --score-1: var(--ember-300);
  --score-2: var(--amber-300);
  --score-3: var(--teal-300);
  --score-4: var(--blue-300);
  --score-5: var(--navy-100);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.6);
}
:root {
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --content-max: 1120px;
  --form-max: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-toast: 400;
  --font-display: Sora, "Avenir Next", system-ui, sans-serif;
  --font-body: Manrope, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }
.display-xl{font-family:var(--font-display);font-size:64px;line-height:68px;font-weight:700;letter-spacing:-0.03em}
.display{font-family:var(--font-display);font-size:44px;line-height:50px;font-weight:700;letter-spacing:-0.025em}
.h1{font-family:var(--font-display);font-size:32px;line-height:40px;font-weight:700;letter-spacing:-0.02em}
.h2{font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.015em}
.h3{font-family:var(--font-display);font-size:20px;line-height:28px;font-weight:600;letter-spacing:-0.01em}
.h4{font-family:var(--font-display);font-size:17px;line-height:24px;font-weight:600}
.score-xl{font-family:var(--font-display);font-size:56px;line-height:56px;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.score-sm{font-family:var(--font-display);font-size:30px;line-height:32px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.body-lg{font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:500}
.body{font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:500}
.body-sm{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:500}
.label{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:700}
.button{font-family:var(--font-body);font-size:15px;line-height:20px;font-weight:700}
.caption{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:600}
.overline{font-family:var(--font-body);font-size:11px;line-height:16px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase}
.mono{font-family:var(--font-mono);font-size:15px;line-height:22px;font-weight:500}
.mono-sm{font-family:var(--font-mono);font-size:13px;line-height:18px;font-weight:500}