/* ============================================================================
   STEMbotix design tokens — the single source of truth for every page.

   Mirrors DESIGN-STEMbotix.md (version: alpha), which formalises the
   "STEMbotix UI Implementation SOP". Do not invent colours, radii, shadows or
   type sizes here; add a token or reuse one.

   THE SIGNATURE RULE: every interactive element hovers to ACCENT ORANGE.
   The primary button's fill turns orange, the secondary button's border and
   label turn orange, the tertiary label turns orange, links turn orange.
   The spec calls this "the most distinctive and most easily-broken part of
   the system" — so it lives here, in one place, as --hover.
   ========================================================================= */
:root {
  color-scheme: light;   /* The system is light-only. The SOP defines no dark mode. */

  /* ── Blue (primary) ────────────────────────────────────────────────────── */
  --blue-950:#1F1B4B;
  --blue-900:#2C2872;   /* brand primary */
  --blue-800:#382FA4;
  --blue-700:#4537CB;
  --blue-600:#5145E6;
  --blue-500:#6262F2;
  --blue-400:#8089F9;
  --blue-300:#A4B2FD;
  --blue-200:#C7D1FE;
  --blue-100:#E0E6FF;
  --blue-50:#EEF2FF;
  --blue-bg:#FAFBFF;    /* page canvas */

  /* 50–300 is tint/background territory, 700–950 is ink territory. */

  /* ── Orange (accent) ───────────────────────────────────────────────────── */
  /* There is no orange-500. Do not interpolate one — step 600 -> 400. */
  --orange-600:#F97316;  /* accent */
  --orange-400:#FA934C;
  --orange-300:#FFC472;
  --orange-200:#FFDDA9;
  --orange-100:#FFF0D4;
  --orange-50:#FFF8ED;

  /* ── Neutrals ──────────────────────────────────────────────────────────── */
  --headline:#0F172B;          /* headings, high-emphasis text */
  --grey:#535865;              /* body text */
  --grey-light:#888D99;        /* placeholder, low-emphasis, disabled labels */
  --border-light-token:#E0E0E0;/* default borders: inputs, cards, dividers */
  --border-dark:#D1D1D1;       /* stronger borders, control outlines */
  --card:#F7F7F7;              /* muted card / panel fill */
  --icon:#BCBCBC;              /* disabled + decorative icon strokes */
  --white:#FFFFFF;

  /* ── Semantic roles ────────────────────────────────────────────────────── */
  --primary:var(--blue-900);
  --accent:var(--orange-600);

  /* Hover is a brand rule, not an implementation detail. Every interactive
     element resolves its hover through this token. */
  --hover:var(--orange-600);
  --primary-hover:var(--orange-600);
  --accent-hover:var(--orange-600);

  /* Disabled primary is the primary at 60% so it composites over any surface. */
  --primary-disabled:rgba(44,40,114,0.6);
  --primary-active:var(--blue-900);

  --text:var(--headline);
  --text-muted:var(--grey);
  --text-subtle:var(--grey-light);
  --surface:var(--white);
  --surface-sunken:var(--blue-bg);
  --surface-card:var(--card);

  /* ── Semantic states ───────────────────────────────────────────────────── */
  /* WARNING is documented: the SOP draws warnings in the accent orange. */
  --warning:var(--orange-600);
  --warning-bg:var(--orange-50);

  /* ERROR and SUCCESS are NOT published in the SOP — it shows the states
     visually but gives no hex. The values below are PROVISIONAL so validation
     UI can render; they are the one place this file departs from the spec.
     Replace them with the design team's hexes; nothing else needs editing.
     Scope: validation borders, helper text and inline alerts ONLY. Never a
     button fill, status dot, icon or syntax colour — those use the ramps. */
  --error:#B42318;             /* PROVISIONAL — awaiting design team */
  --error-bg:#FEF3F2;          /* PROVISIONAL */
  --success:#067647;           /* PROVISIONAL — awaiting design team */
  --success-bg:#ECFDF3;        /* PROVISIONAL */

  /* ── Typography — Montserrat only, four weights, 0% tracking ───────────── */
  /* The SOP names no monospace face. This product ships a code editor, a
     serial monitor and pin tables, where character alignment is functional,
     so --font-code is a documented deviation limited to those surfaces.
     It must never be used for UI chrome: labels, buttons, pills, nav. */
  --font:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-code:'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Letter-spacing is 0 at every step. There is no negative tracking in this
     system, and no uppercase transform anywhere — case stays Original. */
  --h1:700 40px/48px var(--font);
  --h2:700 32px/40px var(--font);
  --h3:600 28px/36px var(--font);
  --h4:600 24px/32px var(--font);
  --b1:500 18px/28px var(--font);
  --b2:500 16px/24px var(--font);
  --b2-reg:400 16px/24px var(--font);
  --b3:500 14px/20px var(--font);      /* button labels, form labels, nav */
  --b3-reg:400 14px/20px var(--font);  /* input text, secondary body */
  --b4:600 12px/16px var(--font);      /* small labels, chips, captions */
  --b4-reg:400 12px/16px var(--font);  /* helper text, fine print */

  /* 12px is the floor. Nothing smaller exists in the scale. */

  /* ── Spacing — nine steps, use these only ──────────────────────────────── */
  --s-8:8px;   --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px;
  --s-32:32px; --s-40:40px; --s-48:48px; --s-56:56px;

  /* ── Radius — measured from SOP artwork, pending confirmation ──────────── */
  --r-sm:4px;    /* checkboxes, small controls */
  --r-md:8px;    /* buttons, inputs, dropdowns, textareas, card media */
  --r-lg:12px;   /* cards, empty states, modals */
  --r-pill:9999px;
  --r-full:50%;

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  /* The SOP lists Shadow with no value, yet forbids inconsistent shadows.
     Exactly two are defined here and nothing else may be used. Depth in this
     system comes mainly from white-on-tinted-canvas contrast. */
  --shadow-card:0 1px 2px rgba(15,23,43,.06), 0 1px 3px rgba(15,23,43,.04);
  --shadow-overlay:0 12px 32px rgba(15,23,43,.16);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  /* Not in the SOP. Kept deliberately small: state changes only, no decoration. */
  --t-fast:120ms cubic-bezier(.4,0,.2,1);
  --t-base:180ms cubic-bezier(.4,0,.2,1);

  /* ── Control sizing ────────────────────────────────────────────────────── */
  /* 56px is the SOP's measured button height and the size to use on marketing
     and form surfaces. Dense tool chrome (IDE toolbars, simulator rails) uses
     --control-h-dense; the SOP documents no compact variant. */
  --control-h:56px;
  --control-h-dense:32px;
}

/* ── Legacy aliases ───────────────────────────────────────────────────────
   Older names still referenced by page-level stylesheets. Kept so nothing
   breaks; prefer the tokens above in new code. */
:root {
  --border-light:var(--border-light-token);
  --stem-navy:var(--blue-900);
  --stem-orange:var(--orange-600);
}

/* ── Brand wordmark ───────────────────────────────────────────────────────
   "STEM" sets in accent orange, "botix" in primary navy. Markup:
   <span class="wordmark"><i>STEM</i>botix</span> */
.wordmark { color:var(--blue-900); font-weight:700; font-style:normal; }
.wordmark i { color:var(--orange-600); font-style:normal; }
/* On a navy ground the navy half would vanish, so it sets in white. */
.wordmark--on-dark { color:#FFFFFF; }
.wordmark--on-dark i { color:var(--orange-600); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}