/* ============================================================
   alih-daya (etalase) — design tokens

   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: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Archivo", 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);
}