/*
 * ═══════════════════════════════════════════════════════════════════════════
 * THIS THEME IS PINK. IT WAS THE DIRECTORY `b-yellow` UNTIL 2026-09-21.
 * ═══════════════════════════════════════════════════════════════════════════
 * The palette is the neon pink / electric purple scheme known as "linsy":
 * accent #ff12a3, secondary #aa17ff. That is DELIBERATE and CONFIRMED — the
 * pink is the intended, current design, not a bug and not a paste-over to be
 * reverted. The directory was renamed to `theme1` (docs/THEME_RENAME_MAP.md),
 * which is why this warning no longer has a misleading name to correct — but
 * the dead yellow/gold fallbacks the old name left behind are still here.
 *
 * CONSEQUENCE FOR READERS: scattered through pages/ and partials/ you will
 * find yellow/gold fallbacks such as `var(--theme-gold, #ffb800)`,
 * `var(--theme-bg-main, #0d0d0d)` and `rgba(255, 184, 0, 0.10)`. Those are
 * DEAD CODE. A CSS fallback only fires when the custom property is undefined,
 * and this file defines every one of those tokens, so the yellow never
 * renders. Do not treat those fallbacks as the source of truth, and do not
 * "restore" the theme to yellow on the strength of them.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * 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 700 `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 hot pink accent   --theme-cyan   = electric purple
 *   --theme-blue  = a neutral dark grey   --theme-navy-* = accent-derived tint
 * They are preserved deliberately — renaming them would touch every page.
 *
 * THREE BACKGROUND SLOTS WERE REPOINTED in this pass. --theme-bg-main held
 * #ff12a3, --theme-bg-card held #fe45b7 and --theme-bg-deep held #AA17FF —
 * i.e. accent colours sitting in background roles, giving 1.90:1 / 2.18:1 /
 * 2.99:1 against --theme-text-primary, all far below WCAG AA. They are now
 * canvas-derived. The live DB override in partials/_theme-vars.ejs used to be
 * the only thing masking this; it no longer has to be.
 *
 * 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.
 *
 * Alpha-only tints use color-mix(…, transparent); canvas-relative mixes anchor
 * on the elevation ladder (--elev-*, layouts/main.ejs) or on --seed-fg;
 * accent-relative mixes may use literal
 * white/black (canvas-independent by design). See docs/THEME_COLOR_SYSTEM.md.
 * ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Core backgrounds — layered neutral darks. REPOINTED: see the header. */
  /* Anchored on --elev-4, not on the bare canvas: mixed straight off --elev-0
     this landed within ~2% of a card and was not a step. Same repair as blue. */
  --theme-bg-deep:     color-mix(in srgb, var(--elev-4) 88%, var(--seed-accent)); /* was color-mix(canvas 84%, accent) */
  --theme-bg-main:     var(--elev-0);        /* page rung (was #ff12a3, 2.18:1) */
  /* DO NOT rewrite these two as var(--bg-card) / var(--bg-input).
     partials/_theme-vars.ejs declares the REVERSE aliases
     `--bg-card: var(--theme-bg-card)` and `--bg-input: var(--theme-bg-input)`
     on :root, and it is included AFTER this file and after the layout's seed
     block, so on source order it wins those two names. Pointing back at them
     from here closes a two-node dependency cycle, and per css-variables-1 §3
     EVERY property in a cycle computes to guaranteed-invalid — which would
     blank --theme-bg-card on 141 call sites (85 of them with no fallback) and
     --theme-bg-input on 32. Neither themeTokenCheck nor themeResolveTokens can
     see it: the resolver never reads _theme-vars.ejs. The formula is written
     out in full here for that reason. --bg-raised is safe (the bridge does not
     re-declare it), but inline is the safer habit. */
  --theme-bg-card:     var(--elev-2);        /* card 6      (was ink-bright 5.6%) */
  --theme-bg-elevated: var(--elev-4);        /* elevated 11 (was ink-bright 7.7%) */
  --theme-bg-input:    var(--elev-input);    /* input 4.5   (was ink-bright 3.1%) */

  /* Primary accent — hot pink (สีเว็บไซต์). Tracks --seed-accent. */
  --theme-gold:        var(--accent);        /* #ff12a3 exact */
  --theme-gold-bright: var(--accent-bright); /* #ff3db4 (was #ff3db5) */
  --theme-gold-shine:  var(--accent-shade);  /* #280e1e (was #290f1f) */
  --theme-gold-dim:    color-mix(in srgb, var(--seed-accent) 10%, transparent); /* exact */
  --theme-gold-border: color-mix(in srgb, var(--seed-accent) 45%, transparent); /* exact */
  --theme-gold-glow:   var(--accent-glow);   /* rgba(255,18,163,.22) exact */

  /* Secondary accent — electric purple (สี header). A literal by decision:
     not reachable from a pink accent (best fit is dE 64.3). Its tint/border/
     glow family still derives from it, so only the anchor is frozen. */
  --theme-cyan:        var(--accent-2);      /* #aa17ff exact */
  --theme-cyan-bright: color-mix(in srgb, var(--accent-2) 75%, white); /* #bf51ff (was #bf52ff) */
  --theme-cyan-dim:    var(--accent-2-tint);   /* rgba(170,23,255,.08) exact */
  --theme-cyan-border: var(--accent-2-border); /* rgba(170,23,255,.28) exact */
  --theme-cyan-glow:   var(--accent-2-glow);   /* rgba(170,23,255,.20) exact */

  /* Neutral surface tone */
  --theme-blue:        var(--bg-surface);    /* #232323 exact */
  --theme-blue-hover:  var(--bg-hover);      /* #2e2e2e exact */
  --theme-blue-subtle: color-mix(in srgb, var(--seed-accent) 7%, transparent); /* exact */

  /* Glossy dark buttons — dashboard qcard / cat-tab / lotto pill.
     R3: --theme-navy-rgb was a frozen "255, 18, 163" 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. */
  /* Base colour behind the retired --theme-navy-rgb triplet. The name is
     historical — in THIS theme the triplet mirrored the accent, not a navy —
     and it is kept because the call sites are byte-shared with blue and
     huay-ver1. Renaming it here would fork those files. */
  --theme-navy:              var(--seed-accent);
  --theme-navy-tint:         color-mix(in srgb, var(--seed-accent) 30%, transparent);
  --theme-btn-blue-top:      color-mix(in srgb, var(--ink-bright) 15.5%, var(--seed-canvas)); /* #333333 exact */
  --theme-btn-blue-bot:      color-mix(in srgb, var(--ink-bright) 4.8%,  var(--seed-canvas)); /* #191919 exact */
  --theme-btn-blue-top-h:    color-mix(in srgb, var(--ink-bright) 19.7%, var(--seed-canvas)); /* #3d3d3d exact */
  --theme-btn-blue-bot-h:    color-mix(in srgb, var(--ink-bright) 8.5%,  var(--seed-canvas)); /* #222222 exact */
  --theme-btn-blue-border:   color-mix(in srgb, var(--seed-accent) 40%, transparent); /* exact */
  --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(--accent-mid);   /* #e40c91 — was a literal in the seed mirror */
  --theme-pill-blue-top:     var(--accent-mid);   /* #e51092 (was #e40c91) */
  --theme-pill-blue-bot:     var(--accent-deep);  /* #910a5d (was #91085d) */
  --theme-pill-blue-tint:    color-mix(in srgb, var(--accent-mid) 32%, transparent);

  /* Active-tab accent — dark pink panel (white text stays readable) */
  /* Base colour behind the retired --theme-tab-cream-rgb triplet. This theme's
     active tab is a dark pink panel, not a cream — the name is shared with
     blue / huay-ver1 so the call sites stay byte-identical. */
  --theme-tab-cream:         var(--seed-accent);
  --theme-tab-cream-top:     color-mix(in srgb, var(--seed-accent) 19.7%, var(--seed-canvas)); /* #3d0e2b (was #3f122e) */
  --theme-tab-cream-bot:     color-mix(in srgb, var(--seed-accent) 11.8%, var(--seed-canvas)); /* #2a0e1f (was #280b1d) */
  --theme-tab-cream-border:  var(--accent);        /* #ff12a3 exact */
  --theme-tab-cream-tint:    color-mix(in srgb, var(--seed-accent) 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-amber follows the primary by design, as it always did here. */
  --theme-red:          var(--state-danger);   /* #ff4d21 exact */
  --theme-red-tint:     color-mix(in srgb, var(--state-danger) 32%, transparent);
  --theme-red-subtle:   var(--state-danger-tint);  /* rgba(255,77,33,.12) exact */
  --theme-green:        var(--state-success);  /* #007e1c exact */
  --theme-green-tint:   color-mix(in srgb, var(--state-success) 32%, transparent);
  --theme-green-subtle: var(--state-success-tint); /* rgba(0,126,28,.12) exact */
  --theme-amber:        var(--state-warning);  /* = the accent, #ff12a3 exact */
  --theme-amber-tint:   color-mix(in srgb, var(--state-warning) 32%, transparent);
  --theme-amber-subtle: var(--state-warning-tint); /* rgba(255,18,163,.12) exact */
  /* A literal by decision, like --theme-cyan: an info-blue is not reachable
     from a pink accent (best fit is dE 52.9). */
  --theme-info:         var(--state-info);     /* #4da3ff exact */
  --theme-info-subtle:  var(--state-info-tint);

  /* Text — tracks the canvas. Both steps now anchor on --seed-fg (see the
     ink-ladder note in layouts/main.ejs); --theme-text-secondary reads as the
     same near-grey at the shipped palette and inverts with the canvas. */
  --theme-text-primary:   var(--ink-hi);     /* #eac0c0 exact */
  --theme-text-secondary: var(--ink-mid);    /* was #aaaaaa; now seed-fg 71.9% */
  --theme-text-muted:     var(--ink-faint);  /* was color-mix(ink-bright 40%, transparent):
                                                translucent AND anchored on a fixed pole, so it
                                                composited to 2.1:1 on an elevated surface */
  --theme-text-white:     var(--ink-bright); /* #ffffff exact — text on coloured buttons */
  --theme-text-on-gold:   var(--font-on-light); /* #2e031e (was #2f041f) — dark ink on pink CTAs */

  /* Borders */
  --theme-border-subtle: var(--line);        /* was ink-bright 8%,  transparent */
  --theme-border-mid:    var(--line-strong); /* was ink-bright 14%, transparent */

  /* 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: three frozen stops, which is why the PAGE itself never re-toned.
     The shipped top stop (#0a0a0a) was darker than the canvas — there is no
     rung below 0, so the band now sits one rung ABOVE it instead. */
  background: linear-gradient(180deg, var(--elev-1) 0%, var(--elev-0) 40%, var(--elev-0) 100%);
  background-attachment: fixed;
  color: var(--ink-hi);
  font-family: var(--theme-font);
}

/* ── AMBIENT PINK + PURPLE GLOW OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%,   color-mix(in srgb, var(--seed-accent) 6%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 85%,  color-mix(in srgb, var(--accent-2) 5%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 8% 100%,  color-mix(in srgb, var(--seed-accent) 2%, transparent) 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);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--seed-ink) 45%, 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) 55%, transparent), 0 0 24px var(--theme-gold-glow);
}

/* ── GOLD 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) 83.5%, black) 0%, color-mix(in srgb, var(--seed-accent) 81.7%, white) 50%, color-mix(in srgb, var(--seed-accent) 83.5%, black) 100%);
  color: var(--theme-text-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) 25%, 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(--accent-2) 73.9%, black), var(--accent-2));
  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: var(--elev-input);
  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(--theme-gold-dim);
}

/* ── BADGE ── */
.theme-badge-hot {
  background: var(--theme-red);
  color: var(--ink-bright);
  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) 83.5%, black), color-mix(in srgb, var(--seed-accent) 81.7%, white));
  color: var(--theme-text-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(--seed-ink) 65%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink-on-dark);
  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 color-mix(in srgb, var(--seed-accent) 15%, transparent);
  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: var(--elev-input); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--seed-accent) 35%, transparent); 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-bright); }
.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 — light text on dark 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-"]):hover {
  text-decoration: none;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 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;
}