/* ============================================================================
   Colour system — one colour per job (owner 2026-09-29: "แบ่งแยกสีสันให้ชัดเจน
   สีปุ่ม การ hover ของสีปุ่ม หัวข้อ เส้นขอบ และอื่นๆ"). Loaded after pages.css and
   before the pkg-* files; the pkg rules that paint prices and codes read these
   tokens. Cyan used to do every job (buttons, active tabs, prices, codes,
   heading bars), so nothing stood out.

     action   cyan     you can click it: primary button, link, the active tab / chip
     sell     green    you get money: offering a card to a shop
     promo    magenta  a highlight / promotion button (.button-dark)
     danger   red      delete, cancel for good (.button.is-danger)
     heading  white    with a magenta bar / eyebrow — decoration, never a button
     price    gold     every money amount
     code     violet   card and set codes
     border   one neutral hairline; an interactive card's hover border is cyan

   Hover: every filled / outline BUTTON wipes to pink (buttons.css, owner 2026-09-30) — sell,
   danger and the pink button wipe to their own lighter tone (mint, light red, light pink);
   the rules below are the no-motion base it sits on. A tab / chip
   gains a border and bright text, a link turns white and underlined. The
   hero's own button (pkg-hero.css, pink wipe) is more specific and keeps its look.
   ============================================================================ */
:root {
  --sf-action: #00f0ff;  --sf-action-hover: #ffffff;  --sf-action-ink: #04121a;  --sf-action-soft: #00f0ff1a;
  --sf-sell: #2ee59d;    --sf-sell-hover: #a4f7d2;    --sf-sell-ink: #03220f;
  --sf-promo: #ff2e88;   --sf-promo-hover: #ff72ae;
  --sf-danger: #ff4757;  --sf-danger-hover: #ff8089;
  --sf-heading: #ffffff; --sf-heading-mark: #ff2e88;  --sf-eyebrow: #ff7ab3;
  --sf-text: #f4f0ff;    --sf-muted: #aaa0ba;
  --sf-price: #ffd24a;
  --sf-code: #b9a8ff;
  --sf-border: #ffffff1f; --sf-border-strong: #ffffff3d; --sf-border-hover: #00f0ffa6;
}

/* ---------- Buttons ---------- */
/* Filled buttons: no border line — the fill is the button (owner 2026-09-29: "เส้นขอบต้องเอาออก"). */
.button-primary, .button-dark, .button.is-sell, .button.is-danger { border: 0; }
.button-primary { background: var(--sf-action); color: var(--sf-action-ink); }
.button-primary:hover, .button-primary:focus-visible { background: var(--sf-action-hover); color: var(--sf-action-ink); box-shadow: 0 0 30px #00f0ff59; }
.button-primary:active { background: #8ff8ff; }

.button.is-sell { background: var(--sf-sell); color: var(--sf-sell-ink); }
.button.is-sell:hover, .button.is-sell:focus-visible { background: var(--sf-sell-hover); color: var(--sf-sell-ink); box-shadow: 0 0 30px #2ee59d59; }

.button-dark { background: var(--sf-promo); color: #fff; }
.button-dark:hover, .button-dark:focus-visible { background: var(--sf-promo-hover); color: #fff; box-shadow: 0 0 26px #ff2e8859; }

.button.is-danger { background: var(--sf-danger); color: #fff; border-color: var(--sf-danger); }
.button.is-danger:hover, .button.is-danger:focus-visible { background: var(--sf-danger-hover); border-color: var(--sf-danger-hover); color: #fff; }

.button-outline { background: transparent; border-color: var(--sf-border-strong); color: var(--sf-text); }
.button-outline:hover, .button-outline:focus-visible { background: var(--sf-action-soft); border-color: var(--sf-action); color: var(--sf-action); }

/* ---------- Links ---------- */
.text-link, .section-heading > .text-link { color: var(--sf-action); }
.text-link:hover, .section-heading > .text-link:hover { color: var(--sf-action-hover); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Tabs and chips: rest (muted, hairline) · hover (white, stronger line) · on (cyan fill) ---------- */
.filter-tab, .sf-chip { color: #c7bdd6; border-color: var(--sf-border); }
.filter-tab:hover, .sf-chip:hover { color: #fff; border-color: var(--sf-border-strong); background: #ffffff0d; }
.filter-tab.active, .filter-tab.active:hover, .sf-chip.is-on, .sf-chip.is-on:hover { background: var(--sf-action); border-color: var(--sf-action); color: var(--sf-action-ink); }

/* ---------- Headings: white; their marks are magenta, so they never read as buttons ---------- */
.section-heading h2, .small-section-heading h2, .sf-page-head h1 { color: var(--sf-heading); }
.section-heading h2::after, .small-section-heading h2::after { background: var(--sf-heading-mark); box-shadow: 0 0 10px #ff2e8866; }
.section-heading::before, .game-section .small-section-heading::before { background: var(--sf-heading-mark); box-shadow: 0 0 8px var(--sf-heading-mark); }
.section-heading .eyebrow, .sf-kicker { color: var(--sf-eyebrow); }
.heading-note { color: var(--sf-muted); }

/* ---------- Prices and codes ---------- */
.product-price, .sf-price, .sf-price-list b, .sf-money { color: var(--sf-price); }
.product-code { color: var(--sf-code); }
.sf-tiers b { color: var(--sf-price); }
/* the game name over a product tile: information, so a quiet label rather than the action cyan */
.product-meta span:first-child { color: #d9cfe9; }

/* ---------- Borders ---------- */
.sf-panel, .sf-card, .sf-decks-tile { --sf-edge: var(--sf-border); }
/* through --sf-edge, so the cut corners' diagonal (pages.css) lights with the border */
.sf-card:hover, .sf-card.is-won:hover { --sf-edge: var(--sf-border-hover); border-color: var(--sf-edge); }
/* grade / condition tag on a product tile: information, so neutral */
.product-tag, .product-card:first-child .product-tag { color: #fff; border-color: var(--sf-border-strong); }

/* ---------- Native selects: a dark drop-down list (owner 2026-09-29: "selectbox ไม่สวยเลย และมองไม่เห็นอะไรเลย")
   — the browser drew the open list white while the options inherited the theme's near-white text. ---------- */
select { color-scheme: dark; }
select option, select optgroup { background: #160d27; color: var(--sf-text); }
select option:checked { background: #00f0ff33; color: #fff; }

/* ---------- Page scrollbar (owner 2026-09-30: "เปลี่ยนสี scrollbar … ดูแบบของเก่า ไม่เอาหัวสามเหลี่ยมบนและล่าง",
   "ทำสีให้เข้ากับเว็บไซต์"): last13's shape — a dark track, a rounded thumb ringed in the track colour,
   no arrow buttons — in the site's cyan → magenta. Chrome 121+ ignores ::-webkit-scrollbar on an element
   that sets scrollbar-color / scrollbar-width (and then draws the arrows), so the standard property only
   goes to browsers without the pseudo-elements (Firefox). Inner scrollers that set their own thin / hidden
   bar keep it. ---------- */
:root { --sf-scroll-track: #140c22; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--sf-scroll-track); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sf-action), var(--sf-promo)); border: 2px solid var(--sf-scroll-track); border-radius: 8px; }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, var(--sf-action), var(--sf-promo)); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7ff8ff, var(--sf-promo-hover)); }
::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(90deg, #7ff8ff, var(--sf-promo-hover)); }
::-webkit-scrollbar-thumb:active { background: var(--sf-promo); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--sf-action) var(--sf-scroll-track); }
}