/* ═══════════════════════════════════════════════════════════════════════════
   SAISEI TRACKER 2 — DESIGN TOKENS
   The constitution. Every color, size, and space in the app comes from here.
   Change a value once → the whole app follows. No component may hardcode
   what belongs in this file.

   A future second theme (day mode) = one alternate block overriding the
   PALETTE section under [data-theme="day"]. Nothing else changes.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── PALETTE — the identity we built and kept ─────────────────────────── */
  --dk:   #1A1714;   /* app background */
  --ch:   #2C2826;   /* card / panel */
  --ch2:  #363230;   /* raised surface: inputs, photo wells */
  --ch3:  #433E3A;   /* hover / highest surface */
  --bd:   #3A3330;   /* borders */
  --str:  rgba(255,255,255,.024);  /* table row stripe */

  --gd:   #C9A96E;   /* gold — primary actions, accents */
  --gdl:  #E8D9B5;   /* gold light — headings, emphasis */
  --gdp:  rgba(201,169,110,.11);   /* gold wash — selected states */

  --cr:   #FAF6EE;   /* cream — primary text */
  --mu:   #8C8074;   /* muted — secondary text */
  --mu2:  #6B5E52;   /* faint — placeholders, disabled */

  --sg:   #4E7A4E;   /* sage — success, paid, in-store */
  --rs:   #A07368;   /* rust — destructive, warnings, unbalanced */

  /* platform identity (settled with the icon system) */
  --plat-saisei: #7AAA7A;
  --plat-etsy:   #CC7755;
  --plat-yaga:   #8899CC;
  --plat-vinted: #66BB99;
  --plat-store:  #C0A060;

  /* ── TYPE SCALE ───────────────────────────────────────────────────────── */
  --fs-xs:  10px;    /* section labels, table headers */
  --fs-sm:  11px;    /* buttons, badges, metadata */
  --fs-md:  12px;    /* inputs, body, table cells */
  --fs-lg:  14px;    /* card titles, item names */
  --fs-xl:  18px;    /* modal headings */
  --fs-2xl: 22px;    /* KPI values, totals */

  /* Legibility floor — the lesson from real use at half a meter in a dim
     room: helper/tip text never below this, never dimmer than --mu. */
  --fs-tip: 11px;

  /* ── SPACING ──────────────────────────────────────────────────────────── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;

  /* ── SHAPE ────────────────────────────────────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ── CONTROLS ─────────────────────────────────────────────────────────── */
  --btn-h:     26px;
  --btn-pad-x: 11px;
  --chk-size:  14px;
  --tap-min:   44px;   /* minimum comfortable tap target (touch surfaces) */

  /* ── LAYOUT ───────────────────────────────────────────────────────────── */
  --modal-w:        520px;
  --modal-w-wide:   820px;
  --photo-detail-h: 480px;   /* fixed height, natural width, never cropped */
  --photo-detail-max-w: 420px;

  /* ── PRINT / LABEL (physical constants, settled by real hardware tests) ── */
  --label-mm:      50;
  --label-qr-mm:   15;
  --label-margin-x-mm: 4;
  --label-margin-y-mm: 2;
}