/* HRKita design tokens — the brief's palette, verbatim. Every colour, radius,
   and font in public.css and admin.css reads from here; a hex literal outside
   this file is a defect. Orange is an accent used ONCE per viewport. */
:root{
  --navy:#082147; --navy-2:#0F2F5F; --orange:#FAAA21; --orange-deep:#E0930F; --orange-text:#9D670B; --action:#1E3A8A;
  --bg:#F7F8FB; --surface:#FFFFFF; --surface-2:#EEF1F7; --line:#D8DEE9; --line-2:#C3CBDA; --pale:#D8E1F3; --paper:#F7F5F1;
  --ink:#0E1B33; --ink-2:#3B4A66; --ink-3:#616E88;
  --ok:#1C7C4E; --warn:#A06000; --bad:#B3261E;
  --ok-bg:#E4F4EB; --warn-bg:#FFF1D6; --bad-bg:#FBE4E2;
  --on-navy:#FFFFFF; --on-navy-2:#C9D4EA; --on-navy-3:#9FB0D0;
  /* Neutral extremes and the lightbox ground. Named so a stylesheet never needs a hex literal
     (a hex outside this file is a defect, pinned by test/lib/design_tokens_test.rb).
     --action-on-navy is the link blue that clears 4.5:1 on the navy ground. */
  --white:#FFFFFF; --black:#000000; --scrim:#05101F; --on-scrim:#E8EDF6; --on-scrim-2:#B7C2D6; --action-on-navy:#9DB4F0;
  --display:"Plus Jakarta Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --body:"Source Sans 3",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --max:76rem; --measure:66ch;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* TYPE SCALE (2026-10-05). Anchored at --fs-base = .9375rem (15px), the size the admin
     and every table, form and card already ran at, with each step the previous one times
     1.125 (a "major second"; values rounded to 3 decimals). A font-size in any stylesheet
     is one of these, a body or fluid display token below, or a relative unit (em, %); a
     literal like .93rem is a defect (pinned by test/lib/design_tokens_test.rb).
     WHY this anchor and ratio, measured on the 48 sizes the stylesheets used before:
     a 16px anchor moved the most-used size (.95rem, 13 uses, all tables/forms/cards) up by
     5% and made admin table rows wrap; a 1.2 ratio moved sizes by up to 9%. This scale
     keeps the mean move at 2.9% and the worst at 6%. Do not re-anchor it to 1rem or to
     1.2 without re-checking every page at 390px and 1440px.
     The five proportion numbers (layout skill section 13.1) live here:
       body    --fs-body (17px) on the public site; the admin body is --fs-base (15px)
       measure --measure (66ch), set above
       type    ratio 1.125, the --fs-* steps
       space   the --s1..--s10 scale, in px, used for padding, margin and gap alike
       grid    --max (76rem) wrap, 12-column intent, gutters from the space scale */
  --fs-2xs:.586rem; --fs-xs:.659rem; --fs-sm:.742rem; --fs-md:.834rem; --fs-base:.9375rem;
  --fs-lg:1.055rem; --fs-xl:1.187rem; --fs-2xl:1.335rem; --fs-3xl:1.502rem; --fs-4xl:1.689rem;
  --fs-5xl:1.901rem; --fs-6xl:2.138rem;
  /* Public body text, the first of the five numbers: 17px. It is not a step of the scale on
     purpose (the nearest step, --fs-lg, is 16.9px); it is the anchor prose is set at. */
  --fs-body:1.0625rem;
  /* Fluid display sizes (headings and big figures): clamp(min, vw, max) between a 360px
     and a 1440px viewport, so no media query is needed to resize a heading. One token
     per role. The few that were merged (page-head h1 and the section h2s, the legacy hero
     card h1 and the services h2) moved by at most 3px at the widest viewport. */
  --fs-d1:clamp(2rem,4.5vw,3.2rem);       /* h1 */
  --fs-d1-hero:clamp(2rem,3.6vw,3rem);    /* hero band h1: capped so the actions stay above the fold of a 1366x768 laptop */
  --fs-d2:clamp(1.75rem,3.2vw,2.6rem);    /* section h2, inner-page h1, article h1 */
  --fs-d3:clamp(1.5rem,2.6vw,2rem);       /* h2 */
  --fs-d4:clamp(1.7rem,4vw,2.4rem);       /* calculator headline figure */
  --fs-d5:clamp(1.8rem,3.4vw,2.8rem);     /* figures band number */
  --fs-d6:clamp(1.25rem,2vw,1.6rem);      /* flow teaser title, calculator card title */
  --shadow-1:0 1px 2px rgba(8,33,71,.06);
  --shadow-2:0 10px 30px -12px rgba(8,33,71,.25);
  --shadow-3:0 20px 50px -30px rgba(8,33,71,.45);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0B1220; --surface:#111A2B; --surface-2:#182338; --line:#263248; --line-2:#334259; --pale:#1E2C48; --paper:#171B22;
  --ink:#E8EDF6; --ink-2:#B7C2D6; --ink-3:#8593AD;
  --ok:#5BD08F; --warn:#F2B84B; --bad:#F28B82;
  --ok-bg:#12301F; --warn-bg:#3A2A08; --bad-bg:#3B1714;
  --action:#6D8BE8; --orange-deep:#FAAA21; --orange-text:#FAAA21;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 30px -12px rgba(0,0,0,.6); --shadow-3:0 20px 50px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0B1220; --surface:#111A2B; --surface-2:#182338; --line:#263248; --line-2:#334259; --pale:#1E2C48; --paper:#171B22;
  --ink:#E8EDF6; --ink-2:#B7C2D6; --ink-3:#8593AD;
  --ok:#5BD08F; --warn:#F2B84B; --bad:#F28B82;
  --ok-bg:#12301F; --warn-bg:#3A2A08; --bad-bg:#3B1714;
  --action:#6D8BE8; --orange-deep:#FAAA21; --orange-text:#FAAA21;
  color-scheme:dark;
}
/* Corporate theme layer (2026-09-26, corporate.css). Two extra stops for the
   hero and band gradients, which run from the brand navy into the brand action
   blue. They extend the brief's palette; they do not replace any value in it.
   Mode-independent on purpose: the hero, stats band and page banner are dark
   grounds in both light and dark mode, like the footer. */
:root{ --navy-deep:#041229; --glow:rgba(109,139,232,.35); --surface-on-pale:#FFFFFF; }
/* Text and line tokens for the tinted and pale section grounds. In light mode
   those grounds are a shade darker than the page, so muted text, eyebrows and
   hairlines are darkened to keep 4.5:1 (public.css, section grounds). In dark
   mode the same grounds are dark, and the darkened values fell to 2.3:1, so
   each has a dark twin below: the ordinary dark ink-3 and orange-text, and the
   stronger dark line, because the plain one disappears on the pale ground. */
:root{ --ink-3-on-tint:#59647C; --orange-text-on-tint:#8A5A0A; --line-on-pale:#C3CBDA; }
/* Cards on the pale ground are white in light mode and the dark surface in
   dark mode; section--pale in public.css hard-sets white, which left light
   grey text on white cards in dark mode (seen 2026-09-26). */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --surface-on-pale:#111A2B; --ink-3-on-tint:#8593AD; --orange-text-on-tint:#FAAA21; --line-on-pale:#334259; }}
:root[data-theme="dark"]{ --surface-on-pale:#111A2B; --ink-3-on-tint:#8593AD; --orange-text-on-tint:#FAAA21; --line-on-pale:#334259; }