/* ─────────────────────────────────────────────────────────────────────────────
 * TOKEN BRIDGE — every --theme-* name below is DERIVED from the six seeds
 * declared in layouts/main.ejs. Nothing here is a hardcoded colour any more,
 * so the Live Demo Customizer (and any future re-tone) drives the whole theme
 * by changing seeds alone, and all 712 `rgba(var(--theme-*-rgb), a)` sites plus
 * every page that reads --theme-* follow with no edit of their own.
 *
 * The --theme-* names are HISTORICAL and do not describe their values:
 *   --theme-gold   = the brand navy        --theme-cyan   = a deeper navy
 *   --theme-blue   = a pale blue surface   --theme-navy-* = accent-derived tint
 * They are preserved deliberately — renaming them would touch every page.
 *
 * The frozen `--theme-*-rgb` triplets that used to live here (R3 BLOCKING)
 * moved into layouts/main.ejs, where they are computed in EJS from the same
 * seed values and are only an advisory. `--theme-navy-tint` and its siblings
 * are the color-mix() replacements for the `rgba(var(--*-rgb), a)` pattern.
 *
 * Alpha-only tints use color-mix(…, transparent); canvas-relative mixes anchor
 * on --seed-fg / --seed-canvas; accent-relative mixes may use literal
 * white/black (canvas-independent by design). See docs/THEME_COLOR_SYSTEM.md.
 * ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Core backgrounds — every one a STEP FROM THE CANVAS (see the elevation
     ladder in layouts/main.ejs). These were the five frozen roots: --theme-bg-card
     was 97% --ink-bright, --theme-bg-input 92%, --theme-bg-deep a fixed accent
     tint, so none of them moved when the canvas did. 380 read sites follow these
     five declarations through ten aliases, which is why a black-canvas palette
     rendered white cards everywhere. */
  /* The side panel must be a real STEP from the card, not a tint of the canvas:
     at the black palette it resolved to #1c1913 against a #1b1b1c card — 1.9%
     apart, which is not a step. Anchored on --elev-4 instead, so it is always
     two rungs off the card and carries an accent tint on top. */
  --theme-bg-deep:     color-mix(in srgb, var(--elev-4) 88%, var(--seed-accent));
  --theme-bg-main:     var(--elev-0);
  --theme-bg-card:     var(--elev-2);
  --theme-bg-elevated: var(--elev-4);
  /* An input is RECESSED inside its card — one rung back toward the canvas —
     which also keeps it distinct from a modal (--elev-3). */
  --theme-bg-input:    var(--elev-input);

  /* Primary accent — brand navy. Tracks --seed-accent. */
  --theme-gold:        var(--accent-deep);                                   /* #123879 (was #123a7a) */
  --theme-gold-bright: var(--seed-accent);                                   /* #1e5bc6 exact */
  --theme-gold-shine:  var(--accent-pale);                                   /* #cedcf3 (was #cfe0f8) */
  --theme-gold-dim:    color-mix(in srgb, var(--accent-deep) 10%, transparent);
  --theme-gold-border: color-mix(in srgb, var(--accent-deep) 38%, transparent);
  --theme-gold-glow:   var(--accent-glow);                                   /* rgba(30,91,198,.22) exact */

  /* Secondary accent — deep navy. Accent darkened, so it tracks a re-tone. */
  --theme-cyan:        var(--accent-darker);                                 /* #0d2858 (was #0a2456) */
  --theme-cyan-bright: var(--accent-mid);                                    /* #133a7f (was #16397e) */
  --theme-cyan-dim:    color-mix(in srgb, var(--theme-cyan) 7%,  transparent);
  --theme-cyan-border: color-mix(in srgb, var(--theme-cyan) 22%, transparent);
  --theme-cyan-glow:   color-mix(in srgb, var(--theme-cyan) 18%, transparent);

  /* Neutral surface tone (blue wash over the canvas) */
  --theme-blue:        var(--accent-wash);                                   /* #e2eaf8 (was #e2edfc) */
  --theme-blue-hover:  color-mix(in srgb, var(--seed-accent) 62.1%, var(--seed-canvas)); /* #6f97da (was #5b89c2) */
  --theme-blue-subtle: var(--accent-tint);                                   /* rgba(30,91,198,.10) exact */

  /* Brand glossy buttons — dashboard qcard / cat-tab / lotto pill.
     R3: --theme-navy-rgb was a frozen "18, 58, 122" triplet that could not
     track a seed change. Every consumer was rgba(var(--theme-navy-rgb), a),
     which is exactly what color-mix(…, transparent) expresses natively, so the
     triplet is replaced by a real colour token. Same for the -rgb names below. */
  /* --theme-navy is the COLOUR the retired --theme-navy-rgb triplet stood for.
     Declared so every `rgba(var(--theme-navy-rgb), a)` call site can become
     `color-mix(in srgb, var(--theme-navy) a%, transparent)` and resolve in the
     browser — which is what makes a runtime seed override actually propagate.
     The name is identical in every theme on the contract; only this value
     differs, which is what keeps the byte-duplicated page files byte-identical
     across blue / b-yellow / huay-ver1 after the codemod.
     #123879 — dE2000 0.7 from the retired literal #123a7a. */
  --theme-navy:              var(--accent-deep);
  --theme-navy-tint:         color-mix(in srgb, var(--accent-deep) 30%, transparent);
  --theme-btn-blue-top:      color-mix(in srgb, var(--seed-accent) 67.8%, white);   /* #6690d8 (was #5a90d6) */
  --theme-btn-blue-bot:      color-mix(in srgb, var(--seed-accent) 77.5%, black);   /* #174799 (was #2b5aa6) */
  --theme-btn-blue-top-h:    color-mix(in srgb, var(--seed-accent) 62.5%, white);   /* #7299db (was #689cdf) */
  --theme-btn-blue-bot-h:    color-mix(in srgb, var(--seed-accent) 84.3%, var(--seed-canvas)); /* #4074ce (was #3163b1) */
  --theme-btn-blue-border:   color-mix(in srgb, var(--seed-accent) 40%, transparent);
  --theme-btn-blue-grad:       linear-gradient(180deg, var(--theme-btn-blue-top) 0%,   var(--theme-btn-blue-bot) 100%);
  --theme-btn-blue-grad-hover: linear-gradient(180deg, var(--theme-btn-blue-top-h) 0%, var(--theme-btn-blue-bot-h) 100%);
  /* Base colour behind the retired --theme-pill-blue-rgb triplet. */
  --theme-pill-blue:         var(--seed-accent);                                     /* #1e5bc6 exact */
  --theme-pill-blue-top:     color-mix(in srgb, var(--seed-accent) 59.4%, white);    /* #799edd (was #5aa9ec) */
  --theme-pill-blue-bot:     color-mix(in srgb, var(--seed-accent) 76.4%, white);    /* #5382d3 (was #2f7fd0) */
  --theme-pill-blue-tint:    color-mix(in srgb, var(--seed-accent) 32%, transparent);

  /* Cream active-tab accent — dashboard cat-tab.on. Warm neutral, deliberately
     NOT accent-derived: it must stay cream when the accent is re-toned. */
  /* Base colour behind the retired --theme-tab-cream-rgb triplet. Anchored on
     --seed-canvas rather than --ink-bright so it inverts correctly if this
     theme is ever re-toned to a dark canvas; its -top/-bot/-border siblings
     predate that rule and stay white-anchored for now.
     #f0d09d — dE2000 6.4 from the retired literal #d8c384. */
  --theme-tab-cream:         color-mix(in srgb, var(--state-warning) 45%, var(--seed-canvas));
  --theme-tab-cream-top:     color-mix(in srgb, var(--ink-bright) 88.6%, var(--state-warning)); /* #faf3e3 */
  --theme-tab-cream-bot:     color-mix(in srgb, var(--ink-bright) 75.2%, var(--state-warning)); /* #f4e4c3 */
  --theme-tab-cream-border:  color-mix(in srgb, var(--ink-bright) 52.1%, var(--state-warning)); /* #eacb8b */
  --theme-tab-cream-tint:    color-mix(in srgb, var(--state-warning) 34%, transparent);
  --theme-tab-cream-grad:    linear-gradient(180deg, var(--theme-tab-cream-top) 0%, var(--theme-tab-cream-bot) 100%);

  /* Status — semantic tokens (danger / success / warning / info) */
  --theme-red:          var(--state-danger);
  --theme-red-tint:     color-mix(in srgb, var(--state-danger) 32%, transparent);
  --theme-red-subtle:   var(--state-danger-tint);
  --theme-green:        var(--state-success);
  --theme-green-tint:   color-mix(in srgb, var(--state-success) 32%, transparent);
  --theme-green-subtle: var(--state-success-tint);
  --theme-amber:        var(--state-warning);
  --theme-amber-tint:   color-mix(in srgb, var(--state-warning) 32%, transparent);
  --theme-amber-subtle: var(--state-warning-tint);
  /* --theme-info was CONSUMED at partials/_theme-vars.ejs:192-193 but never
     declared, so --lotto-blue and --lotto-blue-subtle resolved to nothing on
     every lottery page. Declared here for the first time. */
  --theme-info:         var(--state-info);
  --theme-info-subtle:  var(--state-info-tint);

  /* Text — dark on light. Tracks --seed-fg, so it inverts correctly if the
     canvas is ever re-toned dark. */
  --theme-text-primary:   var(--ink-hi);                                     /* #1e2a44 exact */
  --theme-text-secondary: var(--ink-mid);                                    /* #5a6478 exact */
  /* Was color-mix(--seed-fg 38%, transparent) — a translucent fg, which lands at
     2.13:1 once it composites onto an elevated surface. The lottery pages point
     --lotto-text-dim at this token, so that was 26 sites of unreadable helper
     text. Now the ink ladder's own faint rung, which is tuned against a surface
     rather than against the canvas. */
  --theme-text-muted:     var(--ink-faint);
  --theme-text-white:     var(--font-on-light);                              /* text on coloured buttons */
  --theme-text-on-gold:   var(--font-on-light);                              /* was undeclared on this theme */

  /* Borders */
  /* Hairlines follow the canvas too. These were a translucent wash of
     --seed-ink, which is a FIXED dark pole: on a dark canvas that is black on
     black and the border disappears. --line / --line-strong already had the
     canvas-relative form; these now point at it. 166 read sites. */
  --theme-border-subtle: var(--line);
  --theme-border-mid:    var(--line-strong);

  /* UI tokens */
  --theme-radius:     14px;
  --theme-radius-sm:  8px;
  --theme-radius-lg:  20px;
  --theme-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-font:       'Kanit', 'Sarabun', sans-serif;
}

html {
  scroll-behavior: auto;
  font-family: 'Kanit', sans-serif;
}

/* ── BODY ── */
body {
  /* B6: this was `linear-gradient(160deg, #eaf2fd 0%, #f5f8fc 50%, #ffffff 100%)`
     — three hardcoded light stops. It is the reason the PAGE ITSELF never
     re-toned: publish a black canvas and the body stayed a pale blue wash.
     Now the canvas with a one-step lift, so the gradient inverts with it. */
  background: linear-gradient(160deg, var(--elev-1) 0%, var(--elev-0) 50%, var(--elev-1) 100%);
  background-attachment: fixed;
  color: var(--ink-hi);
  font-family: var(--theme-font);
}

/* ── AMBIENT GLOW OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,   rgba(30, 91, 198, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%,   rgba(18, 58, 122, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 100%,  rgba(10, 36, 86, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── GLOBAL CARD STYLE ── */
.theme-card {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius);
  backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--seed-ink) 7%, transparent);
  transition: var(--theme-transition);
}
.theme-card:hover {
  border-color: var(--theme-gold-border);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--seed-ink) 12%, transparent), 0 0 24px var(--theme-gold-glow);
}

/* ── BLUE DIVIDER ── */
.theme-divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--theme-gold-border) 30%, var(--theme-gold-bright) 50%, var(--theme-gold-border) 70%, transparent 100%);
  border: none;
  margin: 0;
}

/* ── BUTTONS ── */
.theme-btn-gold {
  background: linear-gradient(135deg, color-mix(in srgb, var(--seed-accent) 51%, var(--seed-ink)) 0%, var(--seed-accent) 50%, color-mix(in srgb, var(--seed-accent) 51%, var(--seed-ink)) 100%);
  color: var(--ink-on-gold);
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 18px var(--theme-gold-glow), 0 1px 0 color-mix(in srgb, var(--ink-bright) 15%, transparent) inset;
  letter-spacing: 0.03em;
}
.theme-btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 28px var(--theme-gold-glow), 0 0 16px var(--theme-gold-glow);
}

.theme-btn-cyan {
  background: linear-gradient(135deg, color-mix(in srgb, var(--seed-accent) 42%, var(--seed-ink)), color-mix(in srgb, var(--seed-accent) 65%, var(--seed-ink)));
  color: var(--ink-bright);
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 18px var(--theme-cyan-glow);
}
.theme-btn-cyan:hover {
  box-shadow: 0 6px 26px var(--theme-cyan-glow);
  filter: brightness(1.08);
}

.theme-btn-outline {
  background: color-mix(in srgb, var(--seed-ink) 4%, transparent);
  color: var(--theme-text-secondary);
  border: 1px solid var(--theme-border-mid);
  padding: 7px 18px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--theme-transition);
}
.theme-btn-outline:hover {
  border-color: var(--theme-gold-border);
  color: var(--theme-gold);
  background: var(--elev-hover);
}

/* ── BADGE ── */
.theme-badge-hot {
  background: var(--fill-danger);
  color: var(--ink-on-danger);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.theme-badge-new {
  background: linear-gradient(135deg, color-mix(in srgb, var(--seed-accent) 61%, var(--seed-ink)), var(--seed-accent));
  color: var(--ink-on-gold);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.theme-badge-live {
  background: color-mix(in srgb, var(--ink-bright) 85%, transparent);
  backdrop-filter: blur(6px);
  color: var(--theme-gold);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 50px;
  border: 1px solid var(--theme-gold-border);
  letter-spacing: 0.05em;
}

/* ── SPINNER ── */
.theme-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(30, 91, 198, 0.15);
  border-top-color: var(--theme-gold-bright);
  border-radius: 50%;
  animation: theme-spin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes theme-spin { to { transform: rotate(360deg); } }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--seed-ink) 4%, transparent); }
::-webkit-scrollbar-thumb { background: rgba(18, 58, 122, 0.30); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--theme-gold-bright); }

/* ── UTILITY ── */
.text-gold     { color: var(--theme-gold); }
.text-cyan     { color: var(--theme-cyan); }
.text-dim      { color: var(--theme-text-secondary); }
.text-muted    { color: var(--theme-text-muted); }
.bg-card       { background: var(--theme-bg-card); }
.border-gold   { border-color: var(--theme-gold-border) !important; }
.border-subtle { border-color: var(--theme-border-subtle) !important; }
.glow-gold     { box-shadow: 0 0 18px var(--theme-gold-glow); }
.glow-cyan     { box-shadow: 0 0 16px var(--theme-cyan-glow); }

/* ── TEXT ELEMENT DEFAULTS — dark text on light theme ── */
p   { color: var(--theme-text-secondary); }
li  { color: var(--theme-text-secondary); }
h1, h2, h3, h4, h5, h6 { color: var(--theme-text-primary); }
/* a:not(.btn):not([class*="text-"]):not([class*="nav-"]):not([class*="cn-"]):not([class*="sp-"]) {
  color: var(--theme-gold);
} */
a:not(.btn):not([class*="text-"]):not([class*="nav-"]):not([class*="cn-"]):not([class*="sp-"]):hover {
  /* color: var(--theme-gold-bright); */
  text-decoration: none;
}

/* ── Browser autofill ────────────────────────────────────────────────────────
   Added 2026-09-15. No theme had ANY -webkit-autofill rule, which is a hole the
   polarity work would otherwise have left open: Chrome paints an autofilled
   field with its own background AND its own -webkit-text-fill-color, and
   -webkit-text-fill-color beats `color`. So an input that this pass just made
   legible at every palette goes back to browser-default styling the moment the
   field is autofilled — a pale box with dark text sitting in a dark theme.

   The 1000px inset box-shadow is the standard way to repaint that background,
   since Chrome ignores `background` here. Both halves are canvas-derived, so
   they move together exactly like the input they replace: surface is the canvas
   lifted 8% toward the light pole, ink is the canvas-dependent ladder.
   caret-color is set too — it is a text colour, and it inherits nothing. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-hi);
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ink-bright) 8%, var(--seed-canvas)) inset;
          box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ink-bright) 8%, var(--seed-canvas)) inset;
  caret-color: var(--ink-hi);
  transition: background-color 5000s ease-in-out 0s;
}