/* Design tokens — the closed scales the whole system is built from.
   Nothing downstream may invent a colour, a radius, a size or a shadow: if a
   value is not here, it does not exist. scripts/lint-css.mjs enforces that.

   The scales were derived from what the course actually rendered, then closed:
   22 border-radius values became 4, 49 font sizes became 11, 29 shadows became
   5. Off-scale values snapped to their nearest step, so nothing moved by more
   than a few pixels. */

:root{
  /* ── brand ─────────────────────────────────────────────────────────────── */
  --samai-primary:#243771;
  --samai-primary-2:#2b4785;
  --samai-teal:#3fae9a;
  --samai-teal-dark:#167866;
  --samai-green:#73c267;
  --samai-danger:#c0392b;
  --samai-warning:#e0a128;
  --samai-success:#1e8a6b;
  --samai-dark:#0c1828;
  --samai-dark-2:#0d1b2f;
  --samai-dark-3:#16344f;

  /* ── ink ───────────────────────────────────────────────────────────────── */
  --samai-ink:#2a3344;
  --samai-muted:#5d6875;
  --samai-subtle:#9aa6b6;
  --samai-on-dark:#fff;
  --samai-on-dark-muted:#ffffffd9;
  --samai-on-dark-subtle:#ffffffa3;
  --samai-on-dark-edge:#ffffff24;

  /* ── surfaces ──────────────────────────────────────────────────────────── */
  --samai-page:#f4f8fb;
  --samai-surface:#fff;
  --samai-surface-soft:#f7fafc;
  --samai-surface-sunken:#eef3f8;
  --samai-border:#2437711c;
  --samai-border-strong:#24377133;

  /* ── space ─────────────────────────────────────────────────────────────── */
  /* A hairline the 4px scale cannot express: rules, ticks, 1px insets. */
  --samai-space-hair:2px;
  --samai-space-1:4px;
  --samai-space-2:8px;
  --samai-space-3:12px;
  --samai-space-4:16px;
  --samai-space-5:20px;
  --samai-space-6:24px;
  --samai-space-7:28px;
  --samai-space-8:32px;
  --samai-space-10:40px;
  --samai-space-12:48px;
  --samai-space-16:64px;

  /* ── radius ────────────────────────────────────────────────────────────── */
  --samai-radius-xs:6px;
  --samai-radius-sm:12px;
  --samai-radius-md:18px;
  --samai-radius-lg:24px;
  --samai-radius-pill:999px;
  --samai-radius-circle:50%;

  /* ── type ──────────────────────────────────────────────────────────────────
     A closed ladder. Components size from it and never from `em`, which is what
     produced the 12.16 / 12.48 / 13.12px sizes the course used to render. */
  --samai-text-3xs:10px;
  --samai-text-2xs:11.5px;
  --samai-text-xs:12.5px;
  --samai-text-sm:13.5px;
  --samai-text-base:14.5px;
  --samai-text-md:16px;
  --samai-text-lg:18px;
  --samai-text-xl:21px;
  --samai-text-2xl:27px;
  /* The two fluid roles. Both ends of every clamp sit on the ladder above. */
  --samai-text-display:clamp(22px,2.4vw,30px);
  --samai-text-hero:clamp(27px,3.3vw,40px);

  --samai-leading-tight:1.15;
  --samai-leading-snug:1.55;
  --samai-leading-normal:1.75;
  --samai-leading-relaxed:1.85;

  --samai-weight-normal:500;
  --samai-weight-medium:700;
  --samai-weight-bold:800;
  --samai-weight-black:900;

  /* ── elevation ─────────────────────────────────────────────────────────── */
  --samai-shadow-xs:0 2px 6px #2437711f;
  --samai-shadow-sm:0 7px 16px #24377114;
  --samai-shadow:0 14px 30px #24377112,0 2px 8px #06111d08;
  --samai-shadow-lg:0 22px 46px #24377124;
  --samai-shadow-tile:0 8px 18px #2437712e;
  /* A control that reads as physically raised — the simulator's send button. */
  --samai-shadow-raised:inset 0 1px 0 #ffffff2e,0 12px 24px #00000029;
  --samai-shadow-ring:0 0 0 4px #3fae9a2b;
  --samai-shadow-dark:0 16px 36px #0d1b2f33;

  /* ── interaction ───────────────────────────────────────────────────────── */
  --samai-focus-ring:#3fae9a73;
  --samai-tap-highlight:#2437711f;

  /* ── motion ────────────────────────────────────────────────────────────── */
  --samai-ease:cubic-bezier(.4,0,.2,1);
  --samai-duration-fast:.18s;
  --samai-duration:.28s;
  --samai-duration-slow:.45s;

  /* ── measure ───────────────────────────────────────────────────────────── */
  --samai-width:1120px;
  --samai-gutter:clamp(20px,4vw,48px);
  --samai-tap:44px;

  /* ── tone ──────────────────────────────────────────────────────────────────
     One tone system for the whole course. A surface, tile, chip, keyline, row,
     node or button reads these four variables and never names a colour itself,
     so `tone: "teal"` means the same thing everywhere it is written. Defaults
     are the primary tone; `.s-tone-*` overrides them for a subtree. */
  --s-accent:var(--samai-primary);
  --s-accent-2:var(--samai-teal);
  --s-tint:#2437710a;
  --s-edge:var(--samai-border);
}

.s-tone-primary{--s-accent:var(--samai-primary);--s-accent-2:var(--samai-teal);--s-tint:#2437710a;--s-edge:#24377126}
.s-tone-teal{--s-accent:var(--samai-teal);--s-accent-2:var(--samai-green);--s-tint:#3fae9a12;--s-edge:#3fae9a30}
.s-tone-green{--s-accent:var(--samai-green);--s-accent-2:var(--samai-teal);--s-tint:#73c26714;--s-edge:#73c26738}
.s-tone-warning{--s-accent:var(--samai-warning);--s-accent-2:#d9614f;--s-tint:#e0a12814;--s-edge:#e0a12838}
.s-tone-danger{--s-accent:var(--samai-danger);--s-accent-2:#8f3327;--s-tint:#c0392b12;--s-edge:#c0392b30}
.s-tone-neutral{--s-accent:var(--samai-muted);--s-accent-2:var(--samai-ink);--s-tint:#5d687510;--s-edge:var(--samai-border)}
.s-tone-navy{--s-accent:var(--samai-dark);--s-accent-2:var(--samai-primary);--s-tint:#0c182812;--s-edge:#0c182833}