/* ==========================================================================
   Signboard & Tile — web tokens for hawker.siliconwok.com
   Canonical source. design/tokens.json is generated from this file by scripts/tokens_to_json.py.
   Drawn from the hawker centre itself: stall-signboard capitals, kopitiam
   tile green and celadon, signboard red and turmeric, menu-style ledgers.
   Component classes that consume these tokens live in design/components.css.
   ========================================================================== */

:root {
  /* Core palette (identical to the print editions) */
  --ink:      #1D2721;  /* text, borders */
  --paper:    #F5F7F1;  /* page ground: celadon-tinted, never pure white */
  --deep:     #0E5748;  /* primary green: headers, part dividers, selected */
  --mid:      #2F7A60;  /* secondary green, hover, ingredient series */
  --celadon:  #DCE8DB;  /* tint panels, "At your table" boxes */
  --red:      #C13A22;  /* signboard red: section numbers, warnings, landlord series */
  --turmeric: #E2A72E;  /* accent strips, highlights, hawker-household series */
  --zebra:    #ECF1E9;  /* table striping */
  --rule:     #C6D4C3;  /* hairlines, card borders */
  --faint:    #5D6E63;  /* captions, secondary text */

  /* Semantic roles */
  --bg:          var(--paper);
  --surface:     #FBFCF8;
  --surface-2:   var(--zebra);
  --text:        var(--ink);
  --text-muted:  var(--faint);
  --heading:     var(--deep);
  --accent:      var(--red);
  --highlight:   var(--turmeric);
  --on-deep:     #F2F6EE;
  --link:        var(--deep);
  --focus:       #8A6410;  /* turmeric's ink: turmeric itself is 1.9:1 on paper, below the 3:1 a focus ring needs */

  /* Callouts (match the print components) */
  --box-bg:      #EEF4ED;  --box-border:  var(--deep);
  --warn-bg:     #FBF0EC;  --warn-border: var(--red);
  --gold-bg:     #FBF5E4;  --gold-border: var(--turmeric);  --gold-ink: #8A6410;
  --makan-bg:    var(--celadon); --makan-rule: var(--deep);
  --worked-bg:   var(--ink);     --worked-fg:  #EDF3EA;    --worked-num: #FFE9B8;

  /* Who-pays chips */
  --chip-gov:    var(--red);    --chip-gov-bg:   #FBEFEA;   /* ASK OF GOVERNMENT */
  --chip-self:   var(--deep);   --chip-self-bg:  #E9F1E9;   /* SELF-FINANCING */
  --chip-phil:   #7A5A12;       --chip-phil-bg:  #FBF3DF;   /* PHILANTHROPY-FUNDED */
  --chip-build:  #2F6650;       --chip-build-bg: #F0F6F1;   /* BUILDS ON (dashed border) */
  --chip-add:    var(--on-deep);--chip-add-bg:   var(--deep); /* ADDED IN AN ADDENDUM */

  /* Data series (Follow the Plate charts) */
  --seg-ingredients: #2F7A60;
  --seg-landlord:    #C13A22;
  --seg-centre:      #E5A897;
  --seg-wages:       #0E5748;
  --seg-utilities:   #8FAE98;
  --seg-platforms:   #8A6410;
  --seg-other:       #C6D4C3;
  --seg-hawker:      #E2A72E;

  /* ---- Added for the component library (design/components.css), October 2026 ---- */

  /* Deep-green bands: part dividers, plaques, table heads, cover hero, footer.
     A separate role from --deep because the dark theme lifts --deep to a mint
     for text, while a band must stay a dark, saturated green. */
  --band:            #0E5748;
  --on-band:         #F2F6EE;  /* titles and body on a band (print #F2F6EE) */
  --on-band-dim:     #CFE2D2;  /* ledes, plaque text (print #CFE2D2 / #D5E5D8) */
  --on-band-muted:   #A8C7B0;  /* contents lists, meta lines (print #A8C7B0) */
  --on-band-accent:  #EDBE55;  /* kickers, creed lines (print turmeric, lifted: turmeric is 3.9:1 on the band) */
  --band-chip-bg:    #F2F6EE;  /* the part-number "price chip" */
  --band-chip-fg:    #0E5748;
  --band-chip-sub:   #C13A22;
  --focus-on-band:   var(--on-band-accent);

  /* Signboard: the red masthead band (as in the simulator) */
  --signboard:          #C13A22;
  --on-signboard:       #FFF6EE;
  --on-signboard-dim:   #FDEAE3;  /* simulator #F6D4C8 is 3.9:1 on the red; lifted to clear 4.5:1 */
  --signboard-rule:     var(--turmeric);
  --focus-on-signboard: var(--on-signboard);

  /* Turmeric fills (plaque numbers, highlight tiles) */
  --on-turmeric:   #3A2C08;

  /* Leaders and quiet marks */
  --leader:        #9DB09B;  /* dotted leaders in ledgers and contents */
  --control-border: var(--faint); /* outlines of interactive controls: 3:1 or better */

  /* Worked examples: extra roles on the ink panel */
  --worked-head:   var(--turmeric);
  --worked-rule:   #5E6F64;
  --worked-muted:  #9FC0A8;  /* column heads inside a worked panel */

  /* Blockquote */
  --quote-bg:      #F9F4E6;
  --quote-fg:      #4A4234;
  --quote-rule:    var(--turmeric);

  /* Hawker highlight column in comparison tables */
  --hk-bg:         var(--warn-bg);
  --hk-head:       var(--red);
  --on-hk-head:    #F2F6EE;

  /* Numbers that go up or down */
  --neg:           var(--red);
  --pos:           var(--deep);

  /* Shock-table heat scale (Addendum B.6): loss to the hawker, 0 = small, 3 = largest */
  --heat-0:        #F7E3DC;
  --heat-1:        #F1CBBE;
  --heat-2:        #E9AE9B;
  --heat-3:        #DE8B72;
  --heat-cool:     #E3EFE3;  /* a gain */
  --on-heat:       #2B120B;

  /* Status badges (Plate Tracker, B.9) */
  --status-ok:       var(--chip-self);  --status-ok-bg:   var(--chip-self-bg);  --status-ok-border:   var(--chip-self);
  --status-part:     var(--chip-phil);  --status-part-bg: var(--chip-phil-bg);  --status-part-border: var(--turmeric);
  --status-miss:     var(--chip-gov);   --status-miss-bg: var(--chip-gov-bg);   --status-miss-border: var(--chip-gov);

  /* Labels printed inside chart segments, one per series */
  --on-seg-ingredients: #F6F8F2;
  --on-seg-landlord:    #F6F8F2;
  --on-seg-centre:      #1D2721;
  --on-seg-wages:       #F6F8F2;
  --on-seg-utilities:   #1D2721;
  --on-seg-platforms:   #F6F8F2;
  --on-seg-other:       #1D2721;
  --on-seg-hawker:      #1D2721;

  /* Monte Carlo range bars (B.4) */
  --track:         #E3EBE1;
  --mc-base:       #9DB09B;  --mc-base-dot: #5D6E63;
  --mc-pkg:        #2F7A60;  --mc-pkg-dot:  #0E5748;
  --benchmark:     var(--red);

  /* The tile strip: five inks */
  --tile-deep:     #0E5748;
  --tile-celadon:  #DCE8DB;
  --tile-turmeric: #E2A72E;
  --tile-red:      #C13A22;
  --tile-mid:      #2F7A60;

  /* Print figures (SVGs with literal print inks) sit on a light frame in both themes */
  --figure-print-bg: #FBFCF8;

  /* Type */
  --f-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;                 /* big numerals, hero, part titles. Uppercase. */
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cond:    "IBM Plex Sans Condensed", "Arial Narrow", var(--f-body);        /* headings, labels, table heads, chips */
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;  /* numbers, section ids, ref lines */
  --f-zh:      "Noto Sans SC", var(--f-body);
  --f-ta:      "Noto Sans Tamil", var(--f-body);

  --fs-body: 1.0625rem;  /* 17px; never below 16px on mobile */
  --lh-body: 1.6;
  --measure: 68ch;
  --fs-h1: clamp(2.4rem, 6vw, 4.2rem);   /* Anton */
  --fs-h2: clamp(1.45rem, 3vw, 1.9rem);  /* Plex Cond 700 */
  --fs-h3: 1.2rem;                       /* Plex Cond 700 */
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;                   /* uppercase, letter-spacing .12em */

  /* Shape and space */
  --radius: 0;                 /* the signboard is sharp-cornered */
  --border: 1px solid var(--rule);
  --border-strong: 1.5px solid var(--ink);
  --shadow: 0 1px 0 rgba(29, 39, 33, .15);   /* the heaviest shadow allowed */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;   --space-8: 4.5rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --max-width: 72rem;
}

/* Dark theme: used by the simulator; optional for the site.
   Deep green-black ground, never pure black. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #DCE8DB; --paper: #0B1814; --deep: #5DB394; --mid: #4C9E7F; --celadon: #1B3329;
    --red: #EB6A4F; --turmeric: #E8B54C; --zebra: #12241D; --rule: #2B453A; --faint: #93A99B;
    --bg: #0B1814; --surface: #10211B; --surface-2: #142921; --heading: #9FD6BE; --on-deep: #0B1814;
    --focus: #E8B54C;
    --box-bg: #12261F; --warn-bg: #2A1712; --gold-bg: #2A2312; --gold-ink: #E8B54C;
    --worked-bg: #050C0A; --worked-fg: #DCE8DB;
    --chip-gov-bg: #2A1712; --chip-self-bg: #143328; --chip-phil-bg: #2F2711; --chip-build-bg: #163027;
    --chip-phil: #E8B54C; --chip-build: #8FCBB0;
    --seg-ingredients: #4C9E7F; --seg-landlord: #E3593E; --seg-centre: #E8B0A0; --seg-wages: #1F6B55;
    --seg-utilities: #9CC2AC; --seg-platforms: #B48C33; --seg-other: #3B574A; --seg-hawker: #E8B54C;
    /* added October 2026 with design/components.css */
    --band: #0F4134; --on-band: #EAF2EC; --on-band-dim: #C3D8C8; --on-band-muted: #A9C6B1; --on-band-accent: #EDBE55;
    --band-chip-bg: #E3ECE2; --band-chip-fg: #0F4134; --band-chip-sub: #A8321C;
    --signboard: #A83620; --on-signboard: #FFF3EA; --on-signboard-dim: #F6D6CA; --signboard-rule: #E8B54C;
    --on-turmeric: #2B2006; --leader: #4A6457; --control-border: #93A99B;
    --worked-head: #E8B54C; --worked-rule: #33473D; --worked-muted: #8FB09A;
    --quote-bg: #1E1B10; --quote-fg: #E2D8BE; --quote-rule: #E8B54C;
    --hk-bg: #2A1712; --hk-head: #A83620; --on-hk-head: #FFF3EA; --neg: #F07A60; --pos: #6CC6A2;
    --heat-0: #2A1914; --heat-1: #3F2119; --heat-2: #5A2A1E; --heat-3: #7C3523; --heat-cool: #143027; --on-heat: #F6E6E0;
    --on-seg-ingredients: #0B1814; --on-seg-landlord: #0B1814; --on-seg-centre: #0B1814; --on-seg-wages: #F2F6EE;
    --on-seg-utilities: #0B1814; --on-seg-platforms: #0B1814; --on-seg-other: #F2F6EE; --on-seg-hawker: #0B1814;
    --track: #1A3229; --mc-base: #4E6A5B; --mc-base-dot: #A7BBAE; --mc-pkg: #3F9474; --mc-pkg-dot: #9FD6BE; --benchmark: #E3593E;
    --tile-deep: #2E8A6E; --tile-celadon: #C9DCCB; --tile-turmeric: #E8B54C; --tile-red: #E3593E; --tile-mid: #5DB394;
    --figure-print-bg: #E9EFE6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #DCE8DB; --paper: #0B1814; --deep: #5DB394; --mid: #4C9E7F; --celadon: #1B3329;
  --red: #EB6A4F; --turmeric: #E8B54C; --zebra: #12241D; --rule: #2B453A; --faint: #93A99B;
  --bg: #0B1814; --surface: #10211B; --surface-2: #142921; --heading: #9FD6BE; --on-deep: #0B1814;
  --focus: #E8B54C;
  --box-bg: #12261F; --warn-bg: #2A1712; --gold-bg: #2A2312; --gold-ink: #E8B54C;
  --worked-bg: #050C0A; --worked-fg: #DCE8DB;
  --chip-gov-bg: #2A1712; --chip-self-bg: #143328; --chip-phil-bg: #2F2711; --chip-build-bg: #163027;
  --chip-phil: #E8B54C; --chip-build: #8FCBB0;
  --seg-ingredients: #4C9E7F; --seg-landlord: #E3593E; --seg-centre: #E8B0A0; --seg-wages: #1F6B55;
  --seg-utilities: #9CC2AC; --seg-platforms: #B48C33; --seg-other: #3B574A; --seg-hawker: #E8B54C;
  /* added October 2026 with design/components.css */
  --band: #0F4134; --on-band: #EAF2EC; --on-band-dim: #C3D8C8; --on-band-muted: #A9C6B1; --on-band-accent: #EDBE55;
  --band-chip-bg: #E3ECE2; --band-chip-fg: #0F4134; --band-chip-sub: #A8321C;
  --signboard: #A83620; --on-signboard: #FFF3EA; --on-signboard-dim: #F6D6CA; --signboard-rule: #E8B54C;
  --on-turmeric: #2B2006; --leader: #4A6457; --control-border: #93A99B;
  --worked-head: #E8B54C; --worked-rule: #33473D; --worked-muted: #8FB09A;
  --quote-bg: #1E1B10; --quote-fg: #E2D8BE; --quote-rule: #E8B54C;
  --hk-bg: #2A1712; --hk-head: #A83620; --on-hk-head: #FFF3EA; --neg: #F07A60; --pos: #6CC6A2;
  --heat-0: #2A1914; --heat-1: #3F2119; --heat-2: #5A2A1E; --heat-3: #7C3523; --heat-cool: #143027; --on-heat: #F6E6E0;
  --on-seg-ingredients: #0B1814; --on-seg-landlord: #0B1814; --on-seg-centre: #0B1814; --on-seg-wages: #F2F6EE;
  --on-seg-utilities: #0B1814; --on-seg-platforms: #0B1814; --on-seg-other: #F2F6EE; --on-seg-hawker: #0B1814;
  --track: #1A3229; --mc-base: #4E6A5B; --mc-base-dot: #A7BBAE; --mc-pkg: #3F9474; --mc-pkg-dot: #9FD6BE; --benchmark: #E3593E;
  --tile-deep: #2E8A6E; --tile-celadon: #C9DCCB; --tile-turmeric: #E8B54C; --tile-red: #E3593E; --tile-mid: #5DB394;
  --figure-print-bg: #E9EFE6;
  color-scheme: dark;
}