/* ══════════════════════════════════════════════════════════════
   PEHLI KAMAI — 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:#07181a;        /* page background (darkest) */
  --surface:#091d20;    /* header, raised bars */
  --card:#0d2427;       /* cards, inputs, modals */
  --band:#0b2225;       /* 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:#0e7a72;        /* primary action, HR-side accent */
  --teal-light:#0f8a80;  /* stat numbers / lighter accent */
  --teal-soft:rgba(14,122,114,.16);   /* dark-mode equivalent of the old light teal tint */
  --teal-mid:rgba(14,122,114,.32);
  --lime:#c9dd6a;        /* highlight, candidate-side accent */
  --lime-soft:rgba(201,221,106,.14);  /* 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:#a8c4c6;  /* secondary text */
  --text-3:#7fa5a8;  /* tertiary / meta */
  --text-4:#6f9598;  /* labels */

  /* — type — */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,sans-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:#f4f1ea;          /* 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:#eaf3f0; /* subtle surface tint (pills, card headers) — much lighter than before */
  --fi-ink:#0c3b33;        /* headings/text on light backgrounds */
  --fi-ink-2:#4f6663;      /* 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 */
}