/* KeiHoReCa — shared THEME layer. Every screen consumes the same design tokens
   (--paper / --grid / --ink / --ink-muted / --accent / --ok / --warn ...), so one
   file re-themes them all. Selectors use :root[data-theme="X"] (attribute →
   higher specificity than each screen's own :root defaults, so these win). The
   os-dock keeps its own html[data-theme="light|dark"] blocks (a touch higher
   specificity) for those two; clay/ocean/contrast come from here for every surface.
   Persisted key: localStorage["kh_theme"]; applied by kh-theme.js (and the dock). */

/* ---- LIGHT (paper, warm — the default) ---- */
:root[data-theme="light"]{
  --paper:#F6F1E3; --paper-80:rgba(246,241,227,.93); --paper-60:rgba(246,241,227,.6);
  --grid:#DCD6C2; --grid-bold:#C8C1A6; --hair:rgba(20,18,14,.16);
  --ink:#1A1A1A; --ink-muted:#443E32;
  --accent:#E63946; --accent-2:#264653; --blue:#3a6a8c;
  --ok:#2f7d5b; --warn:#c9820f;
  --title-bg:rgba(255,255,255,.42); --shadow:0 1px 2px rgba(20,18,14,.07),0 4px 10px rgba(20,18,14,.05);
  --glass-tier1:rgba(255,255,255,.74); --glass-edge:rgba(255,255,255,.65); --tip-bg:rgba(255,255,255,.9);
  --cell:#EDE6D6; --cell-empty:#E3DAC5; --good:#3f9d6b; --bad:#c34a3a;
}
/* ---- DARK ---- */
:root[data-theme="dark"]{
  --paper:#14161A; --paper-80:rgba(22,25,30,.93); --paper-60:rgba(22,25,30,.5);
  --grid:#242830; --grid-bold:#353B47; --hair:rgba(255,255,255,.18);
  --ink:#E8E5DC; --ink-muted:#ADA99E;
  --accent:#FF6B6B; --accent-2:#7FB0C4; --blue:#6BA9FF;
  --ok:#4ecb8a; --warn:#e6b24a;
  --title-bg:rgba(255,255,255,.05); --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
  --glass-tier1:rgba(28,31,37,.72); --glass-edge:rgba(255,255,255,.14); --tip-bg:rgba(30,33,39,.92);
  --cell:#20242B; --cell-empty:#1A1D23; --good:#4ecb8a; --bad:#FF6B6B;
}
/* ---- CLAY (warm terracotta / Balinese earth) ---- */
:root[data-theme="clay"]{
  --paper:#EAD9C4; --paper-80:rgba(234,217,196,.93); --paper-60:rgba(234,217,196,.6);
  --grid:#D8C1A5; --grid-bold:#C6A986; --hair:rgba(60,40,25,.20);
  --ink:#2C2018; --ink-muted:#6A5240;
  --accent:#C1502E; --accent-2:#3E7C8C; --blue:#3E7C8C;
  --ok:#5C8A5A; --warn:#B57619;
  --title-bg:rgba(255,250,242,.5); --shadow:0 1px 2px rgba(60,40,25,.1),0 4px 12px rgba(60,40,25,.09);
  --glass-tier1:rgba(245,235,222,.76); --glass-edge:rgba(255,250,242,.6); --tip-bg:rgba(245,235,222,.94);
  --cell:#E3CFB5; --cell-empty:#D8C0A0; --good:#5C8A5A; --bad:#C1502E;
}
/* ---- OCEAN (teal / aqua — surf) ---- */
:root[data-theme="ocean"]{
  --paper:#E7F1F2; --paper-80:rgba(231,241,242,.93); --paper-60:rgba(231,241,242,.6);
  --grid:#CBE1E4; --grid-bold:#AFD2D6; --hair:rgba(10,40,45,.18);
  --ink:#0E2A30; --ink-muted:#3C5B62;
  --accent:#0E8FA0; --accent-2:#1E6FA8; --blue:#1E6FA8;
  --ok:#12967F; --warn:#D08A2A;
  --title-bg:rgba(255,255,255,.46); --shadow:0 1px 2px rgba(10,40,45,.08),0 4px 12px rgba(10,40,45,.07);
  --glass-tier1:rgba(240,249,250,.76); --glass-edge:rgba(255,255,255,.62); --tip-bg:rgba(240,249,250,.94);
  --cell:#DCEBEC; --cell-empty:#CEE2E4; --good:#12967F; --bad:#D9564B;
}
/* ---- CONTRAST (high-contrast, accessible) ---- */
:root[data-theme="contrast"]{
  --paper:#FFFFFF; --paper-80:rgba(255,255,255,.96); --paper-60:rgba(255,255,255,.7);
  --grid:#D0D0D0; --grid-bold:#9A9A9A; --hair:rgba(0,0,0,.4);
  --ink:#000000; --ink-muted:#232323;
  --accent:#0033CC; --accent-2:#B00020; --blue:#0033CC;
  --ok:#006B3C; --warn:#8A5A00;
  --title-bg:rgba(0,0,0,.05); --shadow:0 0 0 1px rgba(0,0,0,.25);
  --glass-tier1:rgba(255,255,255,.92); --glass-edge:rgba(0,0,0,.3); --tip-bg:#FFFFFF;
  --cell:#F2F2F2; --cell-empty:#E6E6E6; --good:#006B3C; --bad:#B00020;
}

/* dock Settings: let the 5-theme switcher wrap instead of overflowing */
.seg.wrap{flex-wrap:wrap;gap:4px}