/* ============================================================
   endoscopy (etalase), design tokens, copied from alih-daya 2026-09-14

   PROVENANCE: derived 2026-09-08 from fkd/mesindev/site/app/tokens.css.
   Not a copy. Per etalase/CLAUDE.md rule 3 the test is a 0.2-second
   recognition across mesindev.com and this page, not a token diff:
   what must carry is the warm neutral ground and ONE heat source.
   Improvising tints on that base is allowed; a different ground is not.
   TYPE IS NOT PART OF THAT GROUND (ruled 2026-09-08) and is chosen per
   resident from what its trade's surface has to do; see the type block.

   NO parent-company name in this file, mesindev's own tokens.css carries
   that instruction and it leaked once (2026-07-12). PT Fauzan Karya Digital
   belongs in the page footer, not here.

   THE ONE DEVIATION, and it is deliberate (ruled 2026-09-08):
   Ember IS "Kosong". mesindev spends its heat source on the accent; this
   surface spends it on the real emergency, so the accent on the landing and
   the worst state on the dashboard are the same colour meaning the same
   thing, attention needed here. Menunggu konfirmasi takes the amber step
   below. NOTHING ELSE on either surface is warm; that contrast is the product.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Type: chosen for THIS trade, not inherited from mesindev.
     Ruled 2026-09-08: type is not part of the shared ground, because a typeface
     does a job for one business and mesindev's job is sophistication. This
     surface is an instrument read at 9pm by a coordinator with an unmanned Pos,
     and later by an owner reconciling what was guarded against what was billed.
     Its job is legibility under pressure, and the trade itself is signage:
     posts, gates, shifts, rosters. So one grotesque with signage lineage across
     display and body, no display serif, and mono kept for data because that is
     functional rather than brand. ---- */
  /* The logo's own face, and ONLY the logo's. mesindev's mark and wordmark are
     set in Instrument Serif (fkd/mesindev/site/components/{Mark,Wordmark}.tsx),
     so reproducing the logo means reproducing that face. It is an asset, not
     part of this resident's type system, and nothing else on the page may use it. */
  --font-mark: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-display: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Neutral ramp, mesindev's, unchanged. This is the ground. ---- */
  --n-50:#F8F7F4;  --n-100:#EFEEE9; --n-200:#E5E3DD; --n-300:#D5D2CB;
  --n-400:#B7B3AA; --n-500:#908C83; --n-600:#6F6C65; --n-700:#514E48;
  --n-800:#34322E; --n-900:#1A1916; --n-950:#0F0E0C;

  /* ---- The single heat source ---- */
  --accent:#C0461C;
  --accent-soft:#F1E3D9;
  --on-accent:#FFFFFF;
  --accent-text:#B5421A;   /* AA 4.56:1 on --bg-deep (vivid --accent is 4.14, fills only) */

  /* ---- Severity ladder. Two steps, and there are only ever two. ----
     Contrast measured against --bg-deep, the worst plane:
       kosong-text  4.56:1   tunggu-text  4.83:1   both clear AA.
     The vivid pair are FILLS (dots, bars, left rules) and are never text. */
  --sev-kosong:#C0461C;        --sev-kosong-text:#B5421A;  --sev-kosong-soft:#F1E3D9;
  --sev-tunggu:#B07A14;        --sev-tunggu-text:#8A5A0A;  --sev-tunggu-soft:#F3EADA;
  /* "Hadir" and every calm row are NOT green. They are the neutral ramp.
     A third colour would put three warm things in one viewport and the
     exceptions would stop being the only thing you see. */
  --sev-calm-text:var(--muted);

  --radius:5px;

  --elev-1:0 4px 16px -12px rgba(20,16,12,0.22);
  --elev-2:0 24px 50px -28px rgba(20,16,12,0.34);
  --top-light:
    inset 0 1px 0 0 rgba(255,255,255,0.92),
    inset 16px -18px 34px -22px rgba(20,16,12,0.07);

  /* ---- Three depth planes, light from above ---- */
  --bg-deep:#EAE8E1;
  --paper:#F6F5F2;
  --surface:#FFFFFF;
  --surface-2:#FBFAF8;
  --border:#E5E3DD;
  --border-strong:#D5D2CB;
  --ink:#1A1916;
  --ink-2:#45433E;
  --muted:#67645E;
  --faint:#6C685F;

  /* ---- Spacing, base 4 ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-24:96px;

  --container:1120px;
  --gutter:24px;
  --margin:20px;
  --baseline:8px;

  /* ---- Breakpoints. Values only; @media must hardcode the px. ---- */
  --bp-md:720px;
  --bp-lg:960px;
  --bp-xl:1280px;

  /* ---- Reading measures, on the TEXT element, never a wrapper ---- */
  --measure-display:22ch;
  --measure-lead:54ch;
  --measure-prose:66ch;
  --measure-tight:46ch;

  /* ---- Type scale ---- */
  --text-display:58px;
  --text-h1:40px;
  --text-h2:28px;
  --text-h3:20px;
  --text-body-lg:18px;
  --text-body:16px;
  --text-small:14px;
  --text-mono:13px;
}

@media (min-width:960px) {
  :root { --margin:40px; }
}

[data-theme="dark"] {
  color-scheme: dark;
  --accent:#DC6536;
  --accent-soft:#2A1A12;
  --on-accent:#1A1916;
  --accent-text:#DC6536;
  --sev-kosong:#DC6536;  --sev-kosong-text:#DC6536;  --sev-kosong-soft:#2A1A12;
  --sev-tunggu:#C9922B;  --sev-tunggu-text:#C9922B;  --sev-tunggu-soft:#241C10;
  --bg-deep:#0D0C0B;
  --paper:#141312;
  --surface:#1B1A18;
  --surface-2:#211F1D;
  --border:#2D2B27;
  --border-strong:#3A3833;
  --ink:#ECEAE4;
  --ink-2:#BDBAB2;
  --muted:#948F86;
  --faint:#8B877D;
  --elev-1:0 4px 16px -12px rgba(0,0,0,0.5);
  --elev-2:0 24px 50px -28px rgba(0,0,0,0.6);
  --top-light:
    inset 0 1px 0 0 rgba(255,253,250,0.13),
    inset 16px -18px 34px -22px rgba(0,0,0,0.26);
}