/* ============================================================================
   HKPL DESIGN TOKENS — the canonical design contract (bedrock).
   DESIGN-TOKENS-V1 (2026-07-11). Authored from the forensic scan of all 103
   pages (411 hex colours → the ~30 real ones; 69 font stacks → 4 roles; 60
   radii → 5). 2026 model: primitives → SEMANTIC roles → templates.

   THE RIGID CONTRACT
   ------------------
   • Pages read ONLY Tier-2 semantic tokens (--brand, --ink, --line…) and the
     scale tokens (--fs-*, --space-*, --r-*). NEVER a raw hex, NEVER a primitive.
   • A "template" overrides ONLY the semantic tokens + the density/shape/type
     knobs — never touches a page. So a NEW design = a new [data-template] block
     below. Zero page edits. That rigidity is what lets us add skins forever.
   • A "tenant colour" = tenant-theme.js sets --brand / --brand-strong /
     --brand-soft from Tenant.theme_color. Templates and tenant colour compose.
   ============================================================================ */
@import url('/css/_auto-tokens.generated.css');   /* exact one-off colours pulled from migrated pages */

:root {
  /* ── TIER 1 · PRIMITIVES (raw palette — from the scan; never used by pages directly) ── */
  --c-green-900:#004d1c; --c-green-800:#006c2c; --c-green-700:#008034; --c-green-600:#00913a; --c-green-500:#12a24a;
  --c-green-100:#d1fae5; --c-green-50:#ecfdf5;  --c-lime-400:#9dff5b;
  --c-ink-900:#0a0e0c;   --c-ink-800:#0f172a;
  --c-gray-700:#374151;  --c-gray-600:#4b5563;  --c-gray-500:#6b7280;  --c-gray-400:#9ca3af;
  --c-gray-300:#d1d5db;  --c-gray-200:#e5e7eb;  --c-gray-100:#f3f4f6;  --c-gray-50:#f9fafb;  --c-white:#ffffff;
  --c-red-700:#b91c1c;   --c-red-600:#dc2626;   --c-red-50:#fef2f2;
  --c-amber-800:#92400e; --c-amber-700:#b45309; --c-amber-50:#fef3c7;
  --c-blue-800:#1e40af;  --c-blue-50:#eff6ff;
  /* mainland-China palette (Taobao orange / JD-refined red / festive gold) */
  --c-orange-500:#ff5000; --c-orange-600:#ff3d00; --c-red-cn:#ef4444; --c-red-cn-strong:#c81e1e;
  --c-gold-500:#e6b422;   --c-gold-600:#c8961a;   --c-orange-50:#fff3ec; --c-red-cn-50:#fef2f2;

  /* ── TIER 2 · SEMANTIC ROLES (THE CONTRACT — templates override these) ── */
  /* A11Y-BRAND-V1 (2026-07-11): brand was #00913a → white text on it = 4.1:1 (fails WCAG AA 4.5). Nudged to
     #008034 (=green-700, white contrast ~5.0, passes AA) — still clearly HKPL green. One-line revert to --c-green-600. */
  --brand:var(--c-green-700);  --brand-strong:var(--c-green-800);  --brand-soft:var(--c-green-50);
  --accent:var(--c-lime-400);  --on-brand:var(--c-white);
  --brand-grad:var(--brand);   /* CTAs: background:var(--brand-grad). templates can make this a gradient */
  /* brand SCALE derived from --brand via color-mix → set one --brand, the whole Tailwind hkpl-* scale
     follows (and a tenant colour / template cascades automatically). Classic computes within 1-2 of the
     old hand-picked #e6f4ec/#008034/#006c2c — imperceptible. This is the "add a template = one colour" win. */
  --brand-50:color-mix(in srgb, var(--brand), white 90%);
  --brand-100:color-mix(in srgb, var(--brand), white 80%);
  --brand-200:color-mix(in srgb, var(--brand), white 58%);
  --brand-300:color-mix(in srgb, var(--brand), white 48%);
  --brand-400:color-mix(in srgb, var(--brand), white 25%);
  --brand-500:var(--brand);
  --brand-600:color-mix(in srgb, var(--brand), black 12%);
  --brand-700:color-mix(in srgb, var(--brand), black 25%);
  --brand-800:color-mix(in srgb, var(--brand), black 40%);
  --brand-900:color-mix(in srgb, var(--brand), black 61%);
  --ink:var(--c-ink-900);      --muted:var(--c-gray-500);          --line:var(--c-gray-200);
  --bg:var(--c-gray-50);       --surface:var(--c-white);           --card:var(--c-white);
  --danger:var(--c-red-600);   --danger-soft:var(--c-red-50);      --on-danger:var(--c-white);
  --warn:var(--c-amber-700);   --warn-soft:var(--c-amber-50);
  --info:var(--c-blue-800);    --info-soft:var(--c-blue-50);
  --focus:var(--brand);

  /* ── TIER 2b · EXTENDED SEMANTIC (surfaces, states, badges — Classic values = today's exact) ──
     Every recurring UI state gets a token so pages reference roles, never raw hex. A theme can
     restyle any of these; Classic reproduces the current look 1:1. */
  --paper:#f5f5f0;              /* warm sheet-page background (scoresheet/print surfaces) */
  --surface-2:#fafafa;         /* subtle inner fill (table label cells, folds) */
  --ink-2:#0f172a;             /* dark slate — inverse headers, heavy borders */
  --line-strong:#d1d5db;       /* stronger border than --line */
  --muted-strong:#4b5563; --muted-2:#6b7280; --muted-3:#9aa0aa;  /* A11Y-V1: darkened for WCAG-AA text contrast (was #9ca3af/#cbd5e1, 2.5:1) */
  --brand-hover:#007a30; --brand-soft-2:#f0fdf4;
  --ok-bg:#d1fae5;  --ok-fg:#065f46;  --ok-line:#a7f3d0;  --ok-fg-2:#14532d;
  --warn-bg:#fef3c7; --warn-fg:#92400e;
  --err-bg:#fee2e2;  --err-fg:#991b1b;  --err-line:#fecaca;  --err-strong:#b91c1c;
  --badge-f-bg:#ffe9d6; --badge-f-fg:#92400e; --badge-m-bg:#d9f0e3; --badge-m-fg:#065f46;
  --win-a-bg:#d1fae5; --win-b-bg:#dbeafe;
  --warn-line:#fde68a; --info-line:#bfdbfe;
  --table-head-fg:#374151;

  /* ── TYPE (fluid clamp() — 2026 standard) ── */
  --font-display:'Akshar',sans-serif;
  --font-body:'Albert Sans','Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --fs-xs:clamp(.72rem,.70rem+.10vw,.78rem);
  --fs-sm:clamp(.82rem,.79rem+.15vw,.90rem);
  --fs-base:clamp(.95rem,.90rem+.22vw,1.02rem);
  --fs-lg:clamp(1.10rem,1.00rem+.40vw,1.25rem);
  --fs-xl:clamp(1.40rem,1.18rem+.80vw,1.80rem);
  --fs-2xl:clamp(1.80rem,1.40rem+1.6vw,2.60rem);
  --lh-tight:1.15; --lh:1.5;

  /* ── DENSITY (a knob templates swap — drives spacing + row height) ── */
  --u:4px;
  --space-1:var(--u); --space-2:calc(var(--u)*2); --space-3:calc(var(--u)*3);
  --space-4:calc(var(--u)*4); --space-5:calc(var(--u)*5); --space-6:calc(var(--u)*6);
  --pad:var(--space-3); --pad-roomy:var(--space-5); --gap:var(--space-3); --row-h:44px;

  /* ── SHAPE ── */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --r-circle:50%;

  /* ── ELEVATION ── */
  --shadow-sm:0 1px 2px rgba(10,14,12,.06);
  --shadow-md:0 6px 18px -8px rgba(10,14,12,.18);
  --shadow-lg:0 18px 40px -16px rgba(10,14,12,.28);

  /* ── MOTION (the delight layer reads these; honours reduced-motion below) ── */
  --ease-spring:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;
}

/* ══════════════════════════ TEMPLATES ══════════════════════════
   Each block below is a COMPLETE new design. It overrides only semantic
   tokens + knobs. To add a design: copy a block, rename, change values,
   register the name in the template picker. No page is ever touched.
   ─────────────────────────────────────────────────────────────── */

/* AURORA — the default (:root above). Airy, whitespace-heavy, rounded, modern 2026. */

/* COMPACT PRO — dense, information-rich; for admins / power users. */
[data-template="compact"]{
  --u:3px; --row-h:34px;
  --r-sm:4px; --r-md:7px; --r-lg:10px;
  --fs-base:clamp(.88rem,.85rem+.10vw,.94rem);
  --shadow-md:0 3px 10px -6px rgba(10,14,12,.16);
}

/* EXECUTIVE — formal: serif headlines, ledger (tabular) numerals, crisp corners, quiet palette. */
[data-template="executive"]{
  --font-display:var(--font-serif);
  --r-sm:2px; --r-md:4px; --r-lg:6px;
  --brand:var(--c-green-800); --accent:var(--c-green-600);
  --bg:var(--c-white); --card:var(--c-gray-50);
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* MIDNIGHT — dark surface (color-scheme swap; still one contract). */
[data-template="midnight"]{
  --ink:#e8ecea; --muted:#9aa5a0; --line:#28322d;
  --bg:#0c110e; --surface:#121815; --card:#151d18;
  --brand:var(--c-green-500); --brand-soft:#12241a; --on-brand:#0c110e;
  color-scheme:dark;
}

/* ARENA — dark neon-sport skin (competitor study, RunPlay 2026): near-black surfaces, teal energy,
   gradient CTAs. Same rigid contract as MIDNIGHT — value overrides only, no page is ever touched. */
[data-template="arena"]{
  --ink:#e9f1ee; --muted:#8fa19b; --muted-strong:#b9c6c1; --muted-2:#93a29c; --muted-3:#6f7f79;
  --line:#1e2f2a;
  --bg:#070b09; --surface:#0d1512; --card:#101a16;
  --brand:#14b8a6; --brand-strong:#0e9488; --brand-hover:#0e9488; --brand-soft:#0b221f;
  --brand-soft-2:#0b221f; --on-brand:#03110f;
  --brand-50:#0b221f; --brand-100:#103029;   /* keep soft-brand surfaces dark, not light-teal on dark */
  --accent:#3ae4cd; --focus:#3ae4cd;
  --brand-grad:linear-gradient(135deg,#14b8a6,#0e9488);
  --r-sm:6px; --r-md:11px; --r-lg:16px;
  --shadow-md:0 8px 22px -10px rgba(0,0,0,.55);
  --shadow-lg:0 20px 46px -18px rgba(0,0,0,.65);
  color-scheme:dark;
}

/* ══════════ MAINLAND-CHINA SKINS (Taobao-trained taste: dense, warm, gradient CTAs) ══════════
   Same rigid contract — value overrides only. CJK-first fonts, higher density, red/orange = luck.
   NOTE: these deliver the *feel* (density + warmth + gradient + CJK type). The full Taobao
   "module-rich" promo layout (coupons/flash-sale/red-packets) is COMPONENT-level, not a token skin. */

/* MARKET 市集 — Taobao everyday: warm orange, high density, gradient action buttons. */
[data-template="market"]{
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --u:2px; --row-h:32px;  /* mainland taste: very compact, minimal spacing, high density */ --r-sm:4px; --r-md:8px; --r-lg:12px;
  --brand:var(--c-orange-500); --brand-strong:var(--c-orange-600); --brand-soft:var(--c-orange-50);
  --brand-grad:linear-gradient(135deg,#ff6a00,#ff3d00); --accent:var(--c-gold-500);
  --fs-base:clamp(.88rem,.85rem+.10vw,.95rem);
}

/* VERMILION 朱砂 — JD-style bold, 2026-refined red (not pure), dense, festive-leaning. */
[data-template="vermilion"]{
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --u:2px; --row-h:32px;  /* mainland taste: very compact, minimal spacing, high density */ --r-sm:5px; --r-md:9px; --r-lg:12px;
  --brand:var(--c-red-cn); --brand-strong:var(--c-red-cn-strong); --brand-soft:var(--c-red-cn-50);
  --brand-grad:linear-gradient(135deg,#f5555a,#c81e1e); --accent:var(--c-gold-500);
}

/* PROSPER 鴻運 — festival red + gold (双11 / 春节), celebratory event skin. */
[data-template="prosper"]{
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --u:2px; --row-h:32px;  /* mainland taste: very compact, minimal spacing, high density */ --r-sm:6px; --r-md:10px; --r-lg:14px;
  --brand:var(--c-red-cn-strong); --brand-strong:#a01515; --brand-soft:#fff5e6;
  --brand-grad:linear-gradient(135deg,#e02424,#c8961a); --accent:var(--c-gold-500);
  --ink:#3a1010; --line:#f0d9b8;
}

/* Respect the OS "reduce motion" setting — the delight layer must obey this. */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }
}

/* A11Y-FOCUS-V1 (2026-07-11): a visible keyboard-focus ring site-wide — WCAG 2.4.7. :where() keeps 0
   specificity (never overrides a component's own focus), :focus-visible shows it for keyboard nav only
   (not on mouse click), so it aids a11y without the "ugly outline on click" complaint. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--focus, #008034);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A11Y-GRAY-V1 (2026-07-11): Tailwind text-gray-400 (#9ca3af) / gray-300 fail WCAG-AA as text on light
   backgrounds (~2.5:1) — the single biggest remaining contrast source. Bump them to an AA-passing grey.
   BUT the same utilities are correct as *light* text on dark surfaces (footers, dark cards) — so restore
   the light grey when the element sits inside a dark-background container. */
.text-gray-400{ color:#6b7280 !important; }
.text-gray-300{ color:#6b7280 !important; }
.bg-ink .text-gray-400, .bg-ink .text-gray-300,
[class*="bg-gray-9"] .text-gray-400, [class*="bg-gray-9"] .text-gray-300,
[class*="bg-ink"] .text-gray-400, [class*="bg-ink"] .text-gray-300,
footer .text-gray-400, footer .text-gray-300,
.bg-hero .text-gray-400, .bg-hero .text-gray-300{ color:#cbd5e1 !important; }

/* A11Y-WHITE-V1 (2026-07-11): translucent white labels (text-white/70,/80) on brand-green backgrounds fail
   AA (~3.3:1). Solidify them — verified visually imperceptible, and more opacity never hurts contrast on any
   background. Fixes the homepage hero + green-card labels. text-white/90 kept (already passes). */
.text-white\/70, .text-white\/80{ color:#fff !important; }

/* SMOOTH-NAV-V1 (2026-07-11): kill the "bad-network flash" the operator saw on every page change.
   Two independent causes, two fixes:
   (1) White interstitial frame while the next document paints. The <body> is themed but <html> is not,
       so the gap between unload and first paint flashes white. Paint the site background on <html>
       itself → the interstitial frame is the page colour, never white.
   (2) Hard cut between documents. The cross-document View Transitions API cross-fades navigations in
       Chromium (covers web + iOS/Android WebView / Capacitor). Progressive enhancement: any browser
       without support just navigates normally — no polyfill, no risk. */
html { background-color: var(--bg); }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================= TAG TAXONOMY (2026-07-28, committee #5) =================
   "Consolidate and define the categories of tagging." ONE shared set of label/tag styles for the whole
   site — use these instead of ad-hoc pill utilities so padding / colour / size stay consistent everywhere:
     .skew + .eyebrow  → a section eyebrow / kicker above a heading (skewed brand pill)
     .tag              → a neutral inline pill (meta / status)
     .tag.tag--brand   → brand-filled pill      .tag.tag--muted → grey pill      .tag.tag--warn → amber pill
     .tag.tag--count   → a compact number / count pill                                                    */
.skew{transform:skewX(-12deg)} .skew>*{display:inline-block;transform:skewX(12deg)}
.eyebrow{display:inline-block;background:var(--brand,#00913a);color:#fff;padding:6px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;line-height:1}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#f1f3f5;color:var(--ink,#0a0e0c);line-height:1.4}
.tag.tag--brand{background:var(--brand,#00913a);color:#fff}
.tag.tag--muted{background:#f1f3f5;color:#6b7280}
.tag.tag--warn{background:#fef3c7;color:#92400e}
.tag.tag--count{padding:2px 8px;min-width:20px;justify-content:center;font-variant-numeric:tabular-nums}

/* TAP-TARGET-V1 (2026-07-30, mobile audit): the inline SHARE action rendered 23px tall on a phone — below the
   24px WCAG AA minimum and far below the 44px touch guideline, so it was easy to miss with a thumb. On TOUCH
   devices only (pointer:coarse) give these small inline actions a comfortable height; desktop is untouched. */
@media (pointer: coarse) {
  .hkpl-share-btn { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
}