/* Archivo (SIL Open Font License 1.1, web/fonts/OFL.txt), self-hosted in four weights. Latin only, ₦ included. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Archivo-700.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Archivo-800.woff2') format('woff2');}
/* SimuLearn design tokens v1.0. One source of truth: prefix --sl-.
   Rules: amber is decoration and fills, never a text colour or the only boundary on light surfaces
   (1.8:1 on white). Use --sl-gold-ink for amber-family text. Focus uses --sl-focus, not amber. */
:root {
  /* Brand */
  --sl-emerald: #0b6b3a;
  --sl-emerald-hover: #08522c;
  --sl-emerald-dark: #043d20;
  --sl-mint: #4cc783;
  --sl-gold: #f2b705;
  --sl-gold-ink: #7a5800;

  /* Semantic, light */
  --sl-bg: #f2f4f1;
  --sl-surface: #ffffff;
  --sl-border: #d9dfda;
  --sl-text: #17211b;
  --sl-muted: #5d6b62;
  --sl-accent: var(--sl-emerald);
  --sl-on-accent: #ffffff;
  --sl-focus: #0b6b3a;
  --sl-success: #0b6b3a;  --sl-success-bg: #e2f3e8;
  --sl-warning: #7a5800;  --sl-warning-bg: #fff4cf;
  --sl-danger: #b3261e;   --sl-danger-bg: #fde7e4;

  /* Type: one family. Tabular numerals replace a separate monospace font. */
  --sl-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sl-text-xs: 12px; --sl-text-sm: 14px; --sl-text-md: 16px; --sl-text-lg: 18px; --sl-text-xl: 22px; --sl-text-2xl: 26px; --sl-text-3xl: 32px;
  --sl-leading-tight: 1.15; --sl-leading-body: 1.5;

  /* Shape, space, motion */
  --sl-radius-card: 12px; --sl-radius-control: 8px; --sl-radius-pill: 999px;
  --sl-space-1: 4px; --sl-space-2: 8px; --sl-space-3: 12px; --sl-space-4: 16px; --sl-space-6: 24px; --sl-space-8: 32px;
  --sl-target: 44px;
  --sl-shadow-card: 0 4px 12px -2px rgba(23, 33, 27, 0.08);
  --sl-motion: 150ms ease;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sl-bg: #121a15; --sl-surface: #1b2620; --sl-border: #2c3a32;
    --sl-text: #e8efe9; --sl-muted: #9db0a3;
    --sl-accent: var(--sl-mint); --sl-on-accent: #06210f; --sl-focus: #4cc783;
    --sl-success: #4cc783; --sl-success-bg: #17301f;
    --sl-warning: #f2b705; --sl-warning-bg: #3a3210;
    --sl-danger: #ff8b80;  --sl-danger-bg: #3c1d1a;
    --sl-shadow-card: none;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --sl-bg: #121a15; --sl-surface: #1b2620; --sl-border: #2c3a32;
  --sl-text: #e8efe9; --sl-muted: #9db0a3;
  --sl-accent: var(--sl-mint); --sl-on-accent: #06210f; --sl-focus: #4cc783;
  --sl-success: #4cc783; --sl-success-bg: #17301f;
  --sl-warning: #f2b705; --sl-warning-bg: #3a3210;
  --sl-danger: #ff8b80;  --sl-danger-bg: #3c1d1a;
  --sl-shadow-card: none;
  color-scheme: dark;
}

/* Base */
body { background: var(--sl-bg); color: var(--sl-text); font: 400 var(--sl-text-md)/var(--sl-leading-body) var(--sl-font); }
.sl-num { font-variant-numeric: tabular-nums; font-weight: 600; } /* money, inputs, tables, HUD */
:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }
button, input, select { min-height: var(--sl-target); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Components */
.sl-card { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-card); box-shadow: var(--sl-shadow-card); padding: var(--sl-space-4); }
.sl-hud-cash { border-left: 5px solid var(--sl-gold); } /* decorative stripe; the figure carries the meaning */
.sl-btn { background: var(--sl-accent); color: var(--sl-on-accent); border: 0; border-radius: var(--sl-radius-control); font-weight: 600; padding: 0 var(--sl-space-4); transition: background var(--sl-motion); }
.sl-btn:hover { background: var(--sl-emerald-hover); color: #fff; }
/* Gate: emerald 2px border + lock icon + label. State is never colour alone. */
.sl-gate { border: 2px solid var(--sl-accent); border-left: 8px solid var(--sl-gold); border-radius: var(--sl-radius-card); background: var(--sl-surface); }
.sl-gate[data-state='failed'] { border-color: var(--sl-danger); }
.sl-gate[data-state='passed'] { border-color: var(--sl-success); background: var(--sl-success-bg); }
.sl-chip { display: inline-flex; gap: var(--sl-space-1); align-items: center; border-radius: var(--sl-radius-pill); padding: 2px var(--sl-space-3); font-size: var(--sl-text-sm); font-weight: 600; border: 1px solid currentColor; }
.sl-chip--ok { color: var(--sl-success); background: var(--sl-success-bg); }
.sl-chip--warn { color: var(--sl-warning); background: var(--sl-warning-bg); }
.sl-chip--bad { color: var(--sl-danger); background: var(--sl-danger-bg); }