/* ==========================================================================
   Silicon Wok — family tokens (wok-tokens.css)
   Derived from motochan/sg-hawker-heritage design/tokens.css @ e36ab98 ("Signboard & Tile").
   Family layer --wok-*; hawker names are aliased to it so ported st-* components work unchanged.
   Hub stall colour = turmeric: a fill/rule only, never text on a light ground (1.99:1).
   ========================================================================== */

/* Fonts: self-hosted, SIL OFL 1.1, Latin subset (Fontsource 5.3.0). Licences in assets/fonts/. */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ---- Family layer (light) ---- */
  --wok-ink:        #1D2721;
  --wok-paper:      #F5F7F1;  /* never pure white */
  --wok-surface:    #FBFCF8;
  --wok-zebra:      #ECF1E9;
  --wok-deep:       #0E5748;  /* primary: headings, links */
  --wok-mid:        #2F7A60;  /* hover */
  --wok-celadon:    #DCE8DB;  /* tint panels */
  --wok-rule:       #C6D4C3;  /* hairlines, photo frames */
  --wok-faint:      #5D6E63;  /* captions */
  --wok-heading:    var(--wok-deep);
  --wok-turmeric:   #E2A72E;  /* fill/rule only */
  --wok-gold-ink:   #8A6410;  /* turmeric-coloured words, focus ring */
  --wok-red:        #C13A22;  /* signboard red: hawker's stall colour; warnings */
  --wok-leader:     #9DB09B;
  --wok-control-border: var(--wok-faint);

  /* Bands: header, hero, footer. Separate from --wok-deep because dark mode lifts --deep to a mint. */
  --wok-band:       #0E5748;
  --on-band:        #F2F6EE;
  --on-band-dim:    #CFE2D2;
  --on-band-muted:  #A8C7B0;
  --on-band-accent: #EDBE55;  /* turmeric lifted to clear 4.5:1 on the band */
  --band-chip-bg:   #F2F6EE;
  --band-chip-fg:   #0E5748;

  /* Stall colour: per sub-site. Hub = turmeric (overridden by @custom.stall_colour in default.hbs). */
  --stall:          #E2A72E;
  --on-stall:       #1D2721;  /* ink: the hawker value #FFF6EE is for red and fails on turmeric */

  /* ---- Hawker aliases (the names components.css speaks) ---- */
  --ink: var(--wok-ink);  --paper: var(--wok-paper);  --deep: var(--wok-deep);  --mid: var(--wok-mid);
  --celadon: var(--wok-celadon);  --rule: var(--wok-rule);  --faint: var(--wok-faint);
  --turmeric: var(--wok-turmeric);  --red: var(--wok-red);  --zebra: var(--wok-zebra);
  --bg: var(--wok-paper);  --surface: var(--wok-surface);  --surface-2: var(--wok-zebra);
  --text: var(--wok-ink);  --text-muted: var(--wok-faint);  --heading: var(--wok-heading);
  --link: var(--wok-deep);  --accent: var(--wok-gold-ink);  --gold-ink: var(--wok-gold-ink);
  --band: var(--wok-band);  --on-deep: #F2F6EE;
  --leader: var(--wok-leader);  --control-border: var(--wok-control-border);
  --focus: var(--wok-gold-ink);  --focus-on-band: var(--on-band-accent);

  /* Callouts */
  --box-bg: #EEF4ED;   --box-border: var(--deep);
  --warn-bg: #FBF0EC;  --warn-border: var(--red);  --warn-ink: var(--red);
  --gold-bg: #FBF5E4;  --gold-border: var(--turmeric);
  --makan-bg: var(--celadon);  --makan-rule: var(--deep);
  --quote-bg: #F9F4E6; --quote-fg: #4A4234; --quote-rule: var(--turmeric);
  --worked-bg: var(--ink);  --worked-fg: #EDF3EA;

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

  /* Type. --gh-font-* only apply if a font is chosen in Ghost admin (off by default). */
  --f-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-body:    var(--gh-font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  --f-cond:    var(--gh-font-heading, "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", sans-serif);
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-body: 1.0625rem;  --lh-body: 1.6;  --measure: 68ch;
  --fs-h1: clamp(2.4rem, 6vw, 4.2rem);
  --fs-h2: clamp(1.45rem, 3vw, 1.9rem);
  --fs-h3: 1.2rem;
  --fs-small: .875rem;
  --fs-label: .75rem;

  /* Shape, depth, space */
  --radius: 0;
  --border: 1px solid var(--rule);
  --shadow: 0 1px 0 rgba(29, 39, 33, .15);
  --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;
  color-scheme: light;
}

/* ---- Dark: deep green-black ground, never pure black. Follows the system unless data-theme="light". ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wok-ink: #DCE8DB; --wok-paper: #0B1814; --wok-surface: #10211B; --wok-zebra: #12241D;
    --wok-deep: #5DB394; --wok-mid: #4C9E7F; --wok-celadon: #1B3329; --wok-rule: #2B453A; --wok-faint: #93A99B;
    --wok-heading: #9FD6BE; --wok-turmeric: #E8B54C; --wok-gold-ink: #E8B54C; --wok-red: #EB6A4F;
    --wok-leader: #4A6457; --wok-control-border: #93A99B;
    --wok-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; --on-deep: #0B1814;
    --box-bg: #12261F; --warn-bg: #2A1712; --gold-bg: #2A2312; --quote-bg: #1E1B10; --quote-fg: #E2D8BE;
    --worked-bg: #050C0A; --worked-fg: #DCE8DB;
    --tile-deep: #2E8A6E; --tile-celadon: #C9DCCB; --tile-turmeric: #E8B54C; --tile-red: #E3593E; --tile-mid: #5DB394;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wok-ink: #DCE8DB; --wok-paper: #0B1814; --wok-surface: #10211B; --wok-zebra: #12241D;
  --wok-deep: #5DB394; --wok-mid: #4C9E7F; --wok-celadon: #1B3329; --wok-rule: #2B453A; --wok-faint: #93A99B;
  --wok-heading: #9FD6BE; --wok-turmeric: #E8B54C; --wok-gold-ink: #E8B54C; --wok-red: #EB6A4F;
  --wok-leader: #4A6457; --wok-control-border: #93A99B;
  --wok-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; --on-deep: #0B1814;
  --box-bg: #12261F; --warn-bg: #2A1712; --gold-bg: #2A2312; --quote-bg: #1E1B10; --quote-fg: #E2D8BE;
  --worked-bg: #050C0A; --worked-fg: #DCE8DB;
  --tile-deep: #2E8A6E; --tile-celadon: #C9DCCB; --tile-turmeric: #E8B54C; --tile-red: #E3593E; --tile-mid: #5DB394;
  color-scheme: dark;
}