/* ============================================================
   เข็มทอง / สวนทอง — Public Durian Supply Heat-Map (Slice 1)
   tokens.css  ·  GREENFIELD visual language  ·  2026-06-08
   ------------------------------------------------------------
   Zero-dependency. No CDN/webfont. All certainty cues are
   CSS/SVG only (hatch / dashed / opacity / ring) so honesty
   survives greyscale and mid-day glare.
   Three switchable DIRECTIONS share ONE structure; they differ
   only in palette + texture intensity + default density:
     [data-dir="atlas"]    warm paper + brass   (เข็มทอง)
     [data-dir="orchard"]  verdant + honey      (สวนทอง)
     [data-dir="signal"]   cool slate + teal    (satellite)
   ============================================================ */

:root {
  /* ---- SPACING · 4-pt ------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ---- RADIUS --------------------------------------------- */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;

  /* ---- LAYOUT ---------------------------------------------
     Max height for a bottom-sheet / drawer popup. `dvh` = the VISIBLE
     mobile viewport (excludes the browser address bar, unlike `vh`),
     minus the fixed app header — so a sheet's sticky header (its ✕
     close) is never pushed off the top. Use this for any new popup. */
  --sheet-max-h: calc(100dvh - 64px);

  /* ---- TYPE ----------------------------------------------- 
     Thai-first system stack → Latin → CJK folded BEFORE generic
     so a future zh locale needs zero rework. Mono = every figure
     (instrument-grade reading). No external font. */
  --font:
    "IBM Plex Sans Thai","Noto Sans Thai Looped","Noto Sans Thai",
    -apple-system,"Segoe UI",
    "PingFang SC","Microsoft YaHei","Noto Sans SC",
    system-ui,Roboto,"Helvetica Neue",sans-serif;
  --mono:
    "IBM Plex Mono",ui-monospace,"SF Mono","DejaVu Sans Mono",
    Menlo,Consolas,monospace;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-x:800;

  --fs-2xs:.69rem; --fs-xs:.78rem; --fs-sm:.875rem; --fs-md:1rem;
  --fs-lg:1.25rem; --fs-xl:1.7rem; --fs-2xl:2.3rem; --fs-3xl:3rem;
  --lh-base:1.6; --lh-tight:1.18;

  /* ---- PROVENANCE LADDER · the brand grammar -------------- 
     Kept consistent across directions (this is the "soul").
     Each tier = {fg,bg,line} + a non-colour glyph (set in JS).
       ◆ official  ~ estimate  ✓ verified  🔒 private  ◷ stale  */
  --pv-official:#1f5fa8;  --pv-official-bg:#e7eef9;  --pv-official-ln:#9fbbe2;
  --pv-est:#8a6310;       --pv-est-bg:#f6eccd;       --pv-est-ln:#dcc079;
  --pv-verified:#0e6b46;  --pv-verified-bg:#dcefe3;  --pv-verified-ln:#86c6a4;
  --pv-private:#6a45a0;   --pv-private-bg:#ece2f7;   --pv-private-ln:#c2a8e6;
  --pv-stale:#5e5e5e;     --pv-stale-bg:#ececea;     --pv-stale-ln:#c4c2bc;

  /* ---- SEMANTIC ------------------------------------------- */
  --warn:#b9770e; --warn-bg:#fbeccd;
  --bad:#b3261e;  --bad-bg:#f7dcd9;

  /* ---- ELEVATION (re-tinted per direction below) --------- */
  --sh-sm:0 1px 2px rgba(20,24,18,.06),0 1px 3px rgba(20,24,18,.07);
  --sh-md:0 6px 18px rgba(20,24,18,.10),0 2px 6px rgba(20,24,18,.06);
  --sh-lg:0 22px 50px rgba(20,24,18,.20);

  /* certainty-material defaults (overridable per direction) */
  --hatch-op:.5;      /* estimate hatch strength            */
  --est-edge:1.6px;   /* dashed edge weight on estimates    */
  --verified-ring:2px;
}

/* ============================================================
   DIRECTION A · ATLAS  — warm paper + brass (เข็มทอง)
   precision cartographic instrument; brass = navigation/brand
   ============================================================ */
:root,
[data-dir="atlas"]{
  --bg:#f3efe6; --bg2:#ece6d8; --surface:#fffdf7; --surface2:#f7f2e7;
  --ink:#211f18; --ink2:#3a362b; --muted:#6e6757; --line:#e3dcca; --line2:#d8cfb8;
  --brand:#a9772b; --brand2:#875c1c; --brand-soft:#f2e6cd; --brand-ink:#5e3f0f;
  --ring:#875c1c;
  /* harvest-pressure ramp: cool wheat → ember (hot = near harvest+volume) */
  --ramp-0:#eceadd;                          /* no/again low                */
  --ramp-1:#e7e2c2; --ramp-2:#e3cf8e; --ramp-3:#d99c4e;
  --ramp-4:#c8632c; --ramp-5:#8f2d1c;
  --haze:#e6e1d4;  --haze-ln:#cfc7b2;        /* k-anon withheld cells       */
  /* season DIRECTION (new, namespaced) — ramp still owns MAGNITUDE; these
     layer the SIGN of days_to_peak so ปลายฤดู looks spent · พีค looks hot */
  --season-wane-veil:#5b6b80; --season-wane-veil-a:.34;  /* cool "ash" wash  */
  --season-wane-hatch:#46536480;                          /* hatch stroke     */
  --season-peak-glow:#ffcf94;                             /* hot peak hairline*/
  --season-mark:#3a362b; --season-mark-halo:#fffdf7;      /* phase glyph + halo*/
  --wane-0:#e7e6ea; --wane-1:#cdd2d9; --wane-2:#a7aec0;   /* (dir-B cool ramp) */
  --wane-3:#7f7f9a; --wane-4:#5e556f; --wane-5:#433a52;
  --sh-sm:0 1px 2px rgba(60,44,18,.07),0 1px 3px rgba(60,44,18,.06);
  --sh-md:0 6px 18px rgba(60,44,18,.11),0 2px 6px rgba(60,44,18,.06);
  --sh-lg:0 22px 50px rgba(60,44,18,.20);
  --hatch-op:.5; --density:1;
}

/* ============================================================
   DIRECTION B · ORCHARD — verdant + honey (สวนทอง)
   agrarian, abundant, warm; calmer/larger default (grower-leaning)
   ============================================================ */
[data-dir="orchard"]{
  --bg:#eef3e8; --bg2:#e4ecdb; --surface:#ffffff; --surface2:#f4f8ee;
  --ink:#17231a; --ink2:#2c3a2d; --muted:#566552; --line:#dde7d4; --line2:#cdddc2;
  --brand:#1f6b3a; --brand2:#134a27; --brand-soft:#dcefe0; --brand-ink:#0f4023;
  --ring:#134a27;
  /* low pressure = cool green, near-harvest = honey→amber (ripening) */
  --ramp-0:#e9efe1;
  --ramp-1:#cfe2bd; --ramp-2:#e6d586; --ramp-3:#e0aa3e;
  --ramp-4:#d07a23; --ramp-5:#a8401a;
  --haze:#e3e9da; --haze-ln:#ccd8bf;
  --sh-sm:0 1px 2px rgba(18,40,24,.06),0 1px 3px rgba(18,40,24,.07);
  --sh-md:0 6px 18px rgba(18,40,24,.10),0 2px 6px rgba(18,40,24,.06);
  --sh-lg:0 22px 50px rgba(18,40,24,.20);
  --hatch-op:.46; --density:1.06;
}

/* ============================================================
   DIRECTION C · SIGNAL — cool slate + teal (satellite/remote-sensing)
   spatial-first, exporter-grade; denser default
   ============================================================ */
[data-dir="signal"]{
  --bg:#eaeef1; --bg2:#dfe6ea; --surface:#ffffff; --surface2:#f1f5f7;
  --ink:#16212b; --ink2:#2b3947; --muted:#566875; --line:#dde4e9; --line2:#cad6dd;
  --brand:#0f6e78; --brand2:#0a4f57; --brand-soft:#d6ecee; --brand-ink:#073e45;
  --ring:#0a4f57;
  /* thermal-ish: cool cyan (low) → yellow → orange → red (hot) */
  --ramp-0:#e7edf0;
  --ramp-1:#aed7d2; --ramp-2:#e4cf63; --ramp-3:#e3892f;
  --ramp-4:#cf5526; --ramp-5:#9c2f1c;
  --haze:#e2e8ec; --haze-ln:#c8d3da;
  --sh-sm:0 1px 2px rgba(16,33,43,.07),0 1px 3px rgba(16,33,43,.07);
  --sh-md:0 6px 18px rgba(16,33,43,.12),0 2px 6px rgba(16,33,43,.07);
  --sh-lg:0 22px 50px rgba(16,33,43,.22);
  --hatch-op:.5; --density:.96;
}

/* ============================================================
   DARK · FIELD THEME (opt-in) — outdoor มือตัด, OLED, glare.
   Ground inverts; brand + provenance preserved (re-validated AA).
   Applies on top of whichever direction is active.
   ============================================================ */
[data-theme="dark"]{
  --bg:#10130f; --bg2:#171b14; --surface:#1b1f18; --surface2:#222720;
  --ink:#ecefe6; --ink2:#cdd4c5; --muted:#9aa593; --line:#2c322a; --line2:#3a4136;
  --haze:#23271f; --haze-ln:#3a4034;
  /* season direction re-tint for dark/field (ramp hue is preserved; only the
     COOL wane channel + veil are lightened so they read on #10130f) */
  --season-wane-veil:#9aa9bd; --season-wane-veil-a:.26;
  --season-wane-hatch:#93a2b6cc; --season-peak-glow:#ffd8a0;
  --season-mark:#ecefe6; --season-mark-halo:#1b1f18;
  --wane-0:#2a2d33; --wane-1:#414855; --wane-2:#5b6577;
  --wane-3:#7d84a0; --wane-4:#9a93b4; --wane-5:#bcb0d6;
  --pv-official-bg:#15273e; --pv-est-bg:#332a12; --pv-verified-bg:#143726;
  --pv-private-bg:#271c3a; --pv-stale-bg:#262722;
  --warn-bg:#3a2e12; --bad-bg:#3a1f1d;
  --sh-sm:0 1px 2px rgba(0,0,0,.55);
  --sh-md:0 8px 22px rgba(0,0,0,.6);
  --sh-lg:0 22px 54px rgba(0,0,0,.66);
}
[data-dir="atlas"][data-theme="dark"]{ --brand:#d59a3e; --brand2:#caa358; --brand-soft:#2e2614; --brand-ink:#f0d29a; --ring:#d59a3e; }
[data-dir="orchard"][data-theme="dark"]{ --brand:#54b87a; --brand2:#6fce93; --brand-soft:#163021; --brand-ink:#bfe9cc; --ring:#54b87a; }
[data-dir="signal"][data-theme="dark"]{ --brand:#3fb4bf; --brand2:#6fcdd5; --brand-soft:#0e2e31; --brand-ink:#bfe9ec; --ring:#3fb4bf; }

/* CJK density hook (zh locale, future): denser line-height for Han. */
[data-lang="zh"]{ --lh-base:1.5; }