/* StemSkills design tokens: THE ONLY place raw colour/type/space values live.
   A palette change or the redesigned logo is a swap in THIS file, nothing else.
   Provisional brand: indigo + amber (ADR-0007). Values from stage-4 code guide §3. */
:root{
  /* colour */
  --ssl-ink:#1A1A2E;      --ssl-slate:#4A4A63;
  --ssl-paper:#F7F7FB;    --ssl-surface:#FFFFFF;
  --ssl-primary:#312E81;  --ssl-primary-700:#252160;  --ssl-primary-tint:#EEEEF6;
  /* accent-strong is the "where more contrast is needed" amber (brand guideline §3).
     It was #C9891A, which measured 2.78:1 on --ssl-paper and 2.97:1 on --ssl-surface and
     failed even the 3:1 large-text threshold, so it could not carry a number or a rule
     that has to be seen. Darkened to #A87410: same hue (39.5deg vs 38.1deg, still amber,
     not brown), lightness dropped until both grounds clear 3:1 with margin.
     MEASURED: 3.80:1 on --ssl-paper #F7F7FB, 4.06:1 on --ssl-surface #FFFFFF. */
  --ssl-accent:#E8A317;   --ssl-accent-strong:#A87410; --ssl-accent-tint:#FCEFCF;
  --ssl-line:#E5E4EE;
  /* --ssl-line-strong is the hairline WHEN IT IS THE ONLY THING SAYING "this is a control".
     --ssl-line is right for a divider, which is decoration and has no contrast floor. It is
     wrong for the secondary button, whose fill is transparent and whose label is the same ink
     as the body text around it: there, the 1px border is the entire affordance, so WCAG 1.4.11
     applies and wants 3:1. MEASURED for #E5E4EE as a boundary: 1.18:1 on --ssl-paper, 1.26:1
     on --ssl-surface, 1.14:1 on --ssl-accent-tint. A low-vision parent could not tell the
     "Call 78768 05675" button from a phone number printed in a sentence, on the page whose
     whole conversion is a phone call.
     MEASURED for #85839F: 3.42:1 on --ssl-paper, 3.66:1 on --ssl-surface, 3.31:1 on
     --ssl-accent-tint. Passes on all three grounds the button actually sits on.
     NOT --ssl-slate, which passes at 8:1 but is already the :hover border, so using it at rest
     would silently delete the hover state. Same reasoning as --ssl-accent-strong above. */
  --ssl-line-strong:#85839F;

  /* type */
  --ssl-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --ssl-sans:'Atkinson Hyperlegible',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ssl-fs-1:14px; --ssl-fs-2:17px; --ssl-fs-3:21px; --ssl-fs-4:26px;
  --ssl-fs-5:33px; --ssl-fs-6:41px; --ssl-fs-7:52px;
  --ssl-lh-tight:1.15; --ssl-lh-body:1.6;

  /* TRACKING IS SIZE-SPECIFIC. Apple's typography rule (WWDC 2020, "The Details of UI
     Typography"): letters read too far apart as type grows, so display sizes want NEGATIVE
     tracking, while small text wants slightly positive tracking to stay legible. One fixed
     letter-spacing is therefore wrong somewhere by definition.
     Before this, only h1 carried tracking (-.015em) and it kept that single value whether it
     rendered at 33px on a phone or 52px on a desktop, which is exactly the mistake the rule
     names. One value per step of the type scale, applied wherever that step is set. */
  --ssl-track-7:-.022em;   /* 52px display */
  --ssl-track-6:-.019em;   /* 41px */
  --ssl-track-5:-.015em;   /* 33px */
  --ssl-track-4:-.011em;   /* 26px */
  --ssl-track-3:-.006em;   /* 21px */
  --ssl-track-2:0;         /* 17px body: leave alone */
  --ssl-track-1:.004em;    /* 14px small print opens up very slightly */

  /* space, 8px system */
  --ssl-s-1:4px; --ssl-s-2:8px; --ssl-s-3:12px; --ssl-s-4:16px;
  --ssl-s-5:24px; --ssl-s-6:32px; --ssl-s-7:48px; --ssl-s-8:64px; --ssl-s-9:96px;

  /* shape */
  --ssl-radius:8px; --ssl-maxw:1200px;
  --ssl-shadow:0 1px 2px rgba(26,26,46,.06);

  /* motion. Emil Kowalski craft: strong custom easings + short UI durations.
     Only ever transition transform + opacity (GPU). Honour reduced-motion (base.css). */
  --ssl-ease-out:cubic-bezier(.23,1,.32,1);      /* enter/exit + UI feedback; feels responsive */
  --ssl-ease-in-out:cubic-bezier(.77,0,.175,1);  /* on-screen movement/morph */
  --ssl-dur-press:130ms;   /* button/press feedback (100-160ms) */
  --ssl-dur-ui:190ms;      /* dropdowns, hovers, small popovers (<300ms) */

  /* shape, continued */
  --ssl-radius-pill:999px;   /* the one pill shape: buttons, chips, skip link, cta-bar */

  /* chrome metrics. needed in four places each (own height, mega offset,
     anchor scroll-margin under the sticky header, mobile-nav top row) */
  --ssl-header-h:72px;       /* 8x9 on the grid: 40px logo + s-4 either side */
  --ssl-header-h-sm:56px;    /* 8x7: a 44px burger plus breathing room */

  /* accessibility */
  --ssl-tap:44px;            /* WCAG 2.1 AA minimum target; greppable, one edit to bump */

  /* Status colours, from the approved Submit Opportunity comp (ADR-0026). Until that page the
     palette deliberately had no red or green: nothing on a marketing page fails. A form does.
     MEASURED as text: --ssl-error 5.86:1 on --ssl-surface, 5.49:1 on --ssl-paper;
     --ssl-ok 4.99:1 on surface, 4.67:1 on paper. Both clear AA at any size on both grounds.
     The tints are card/pill grounds for their full-strength partner, never text colours. */
  --ssl-error:#B23B3B;       --ssl-error-tint:#F7E7E7;
  --ssl-ok:#2F7D5C;          --ssl-ok-tint:#E7F1EC;
  /* Deadline-status colours for the opportunities directory (same comp set).
     --ssl-warn is TEXT-grade amber, unlike --ssl-accent-strong which is graphical-grade:
     measured 4.79:1 on --ssl-accent-tint (its pill ground) and 5.12:1 on paper.
     --ssl-slate-tint grounds the Closed pill; slate on it measures 7.28:1. */
  --ssl-warn:#8A6210;
  --ssl-slate-tint:#ECECF1;

  /* layer scale. named so nobody invents 10, 999 and 9999 for the same stack */
  --ssl-z-sticky:80;         /* mobile bottom CTA bar, below the header */
  --ssl-z-header:100;        /* sticky site header */
  --ssl-z-mega:110;          /* Programs panel: above the header border it hangs from */
  --ssl-z-nav:200;           /* full-screen mobile nav: covers header, page and CTA bar */

  /* dark-ground extras */
  --ssl-line-dark:#34344E;   /* hairline on --ssl-ink; --ssl-line reads as a white stripe there */
  --ssl-shadow-panel:0 8px 24px rgba(26,26,46,.10); /* overlay depth for c-mega only; --ssl-shadow is a card shadow */
}