/* ══════════════════════════════════════════════════════════════
   MR CANDIDATE — design tokens
   This is the "change the colours" file. Everything else (styles.css,
   views.css) reads these variables — edit values here, not elsewhere.
   Source: manager's design handoff (dark teal/lime direction).
   ══════════════════════════════════════════════════════════════ */
:root{
  /* — surfaces — */
  --ink:#061626;        /* page background (darkest) */
  --surface:#081c30;    /* header, raised bars */
  --card:#0b2338;       /* cards, inputs, modals */
  --band:#0a2034;       /* pull-quote / callout band */

  /* — borders — */
  --line:rgba(255,255,255,.09);   /* hairline */
  --line-2:rgba(255,255,255,.14); /* control / focus border */

  /* — brand — pinned to the manager's "Pehli Kamai v3.html" reference — */
  --teal:#0e90e8;        /* primary action, HR-side accent. Base blue #0E90E8 (Oct 2026 "Blue + Sunshine" rebrand) */
  --teal-light:#3aa6ee;  /* stat numbers / lighter accent */
  --teal-soft:rgba(14,144,232,.16);   /* dark-mode equivalent of the old light teal tint */
  --teal-mid:rgba(14,144,232,.32);
  --lime:#ffb511;        /* highlight, candidate-side accent. Yellow #FFB511; name kept so the 30-odd call sites stay put */
  --lime-soft:rgba(255,181,17,.18);  /* dark-mode equivalent of the old light lime tint */
  --mauve:#c98fb0;       /* lightened for dark backgrounds (was #914e72 on white) */
  --mauve-soft:rgba(201,143,176,.16);

  /* — text — */
  --text:#eaf4f4;    /* primary body text */
  --text-2:#a8bfd0;  /* secondary text */
  --text-3:#7f9db3;  /* tertiary / meta */
  --text-4:#6f8ea5;  /* labels */

  /* — type — */
  /* Poppins is the geometric sans the logo is set in, so the page and the
     mark read as one thing. --serif keeps its name and its 65 call sites
     rather than being renamed across two stylesheets; it is still the
     display role, it is just no longer a serif. */
  --serif:'Poppins',system-ui,-apple-system,sans-serif;
  --sans:'Poppins',system-ui,-apple-system,sans-serif;
  /* The one exception, and the reason this is its own token: the hero
     wordmark keeps the old Instrument Serif italic. Everything else
     moved to Poppins; this did not, on purpose. */
  --hero-display:'Instrument Serif',Georgia,serif;
  --mono:ui-monospace,'SF Mono','Consolas','Liberation Mono',monospace; /* tiny metadata only — dates, tags, labels */

  /* — radius — */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:18px;

  /* ── editorial system (Part 2) ──────────────────────────────────
     The dark tokens above are Part 1's (shutter/door-view) palette —
     kept working, not reused here, so that code still renders correctly
     if it's ever re-enabled. This is a separate light-by-default system:
     a warm-neutral page with bold full-bleed teal/lime/ink SECTIONS
     dropped in between, editorial-magazine style, not a single dark page. */
  --paper:#f5f8fb;          /* default page background — warm, not pure white */
  --ed-ink:#161616;         /* primary text on light backgrounds — near-black, warmed */
  --ed-ink-2:#4a4b46;       /* secondary text on light backgrounds */
  --ed-line:rgba(22,22,22,.12); /* hairline on light backgrounds */

  /* extreme-contrast type scale — deliberately huge steps between adjacent
     sizes (Ransom Note found ~8-10x ratios between a headline and its
     caption in the SAME section; these tokens make that easy to hit
     consistently instead of picking sizes ad hoc per component). */
  --size-mega:clamp(64px,11vw,140px);   /* one-word/short-phrase hero statements */
  --size-display:clamp(40px,6vw,72px);  /* section headlines */
  --size-h2:clamp(26px,3.2vw,38px);     /* sub-headlines */
  --size-body:17px;                     /* running/dek copy */
  --size-caption:12px;                  /* the tiny register — dates, tags, tiny labels, --mono */

  /* ── flat-illustration system (Part 3 — current direction) ─────────
     Light, conventional two-column hero + flat vector character
     illustrations, not the dark editorial system above (also superseded)
     and not the 3D shutter (Part 1, still parked/unused). Landed on after
     many rounds against real reference images — see the plan file.
     Colors/fonts below are pinned to the manager's "Pehli Kamai v3.html"
     reference build (extracted via computed styles, not eyeballed) — do
     not drift from these hexes without re-checking that file. */
  --bg-light:#ffffff;      /* page background — plain white in the reference, not tinted */
  --bg-light-tint:#e8f3fc; /* subtle surface tint (pills, card headers) — much lighter than before */
  --fi-ink:#0b2e4a;        /* headings/text on light backgrounds */
  --fi-ink-2:#4e6170;      /* secondary text / inactive nav — darkened slightly from the
                              reference's exact #5e7370 (which measured 4.46:1, just under
                              the 4.5:1 AA threshold on this site's light backgrounds) */
  --skin:#e8b48c;          /* character illustration skin tone */
  --skin-shade:#d99f75;    /* shaded/underside tone for the same */
  --hair:#241a15;          /* character illustration hair */

  /* ── tokens that exist so the theme can flip ────────────────────────
     --teal-ink is teal used as TEXT. It is a separate token from --teal
     purely so dark mode can lighten the two independently: --teal is also
     a fill behind white text 29 times, and lightening that would drop
     white-on-teal below AA. In light mode the two are deliberately the
     SAME value, so splitting them changed nothing visually.
     --surface-1 is any raised panel that was previously a literal #fff. */
  --teal-ink:#0a6fb5;
  --surface-1:#ffffff;
  --surface-line:rgba(11,46,74,.08);

  /* ══ light only ═══════════════════════════════════════════════════
     The site is deliberately light at every setting; there is no dark
     theme. This declaration is what makes that hold: without it, a
     phone set to dark still renders the UA's own widgets dark --
     text inputs, selects, checkboxes, scrollbars -- so the sign-in
     and add-profile forms would come out dark on a light page. Naming
     the scheme tells the browser to draw all of them light to match.

     --teal-ink stays a separate token from --teal even so. It costs
     nothing here, and it is the seam a dark theme would need again. */
  color-scheme: light;
}