/* design-tokens-vars.css — DERIVED, do not edit by hand. * * The VARIABLE half of design-tokens.css, split out on 2026-08-06 so it can be served on every page. * 89 of 150 pages had no tokens at all, which is why colours drifted page to page and why ~24 pages * stayed light when the dark theme shipped. * * Only declarations live here: `:root` and the seven `[data-template]` theme blocks. A variable paints * nothing by itself, and a [data-template] block is inert unless that template is active — so adding * this file to a page cannot move anything that was not already asking for a token. * * The PAINT half (focus rings, .tag, .eyebrow, #site-header height, the Tailwind !important overrides) * stays in design-tokens.css, opt-in, exactly where it was. * * Regenerate: node scratchpad/split-tokens.cjs */ /* ============================================================================ 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 (a BACKGROUND; stays dark) */ --ink-slate:#0f172a; /* primary body/label TEXT in the slate variant — inverts light↔dark per template (pages that painted body text with --ink-2 should read this so text is legible on dark; light value is byte-identical to the old --ink-2). */ --field-ink:#000000; /* TYPED text inside form controls — :root = the UA default (#000) so light is byte-identical; inverts to light on dark templates so typed values stay legible. */ /* WhatsApp-chat palette (chat-ui.css authority; messages.html + app.html chat). :root = exact current light literals (byte-identical); dark templates swap to the WhatsApp-dark scheme so bubbles/canvas darken. */ --wa-canvas:#efeae2; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-ink:#111b21; --wa-meta:#667781; --wa-daysep-bg:#ffffff; --wa-daysep-fg:#54656f; --wa-quote:#dcf3ea; --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; /* ── TIER 2c · UTILITY SHADE TOKENS (THEME-SURFACES-V2, 2026-08-03) ────────────────────────── The "last mile" of the template engine: raw Tailwind colour utilities (text-gray-700, bg-gray-100, bg-amber-50 …) hard-code hex, so a dark template never reached utility-painted pixels. theme-surfaces.css repoints each utility at ONE of these tokens. RULE: every :root value below is BYTE-IDENTICAL to the Tailwind literal that utility renders today (verified by before/after computed-colour probe), so the DEFAULT + every LIGHT template is pixel-unchanged. Only the DARK template blocks (midnight/arena) override them → utility-painted content finally darkens. Mapping lives ONLY here + theme-surfaces.css (one truth). (text-gray-400/300 are deliberately NOT here — a pre-existing A11y !important already pins them.) */ --u-t900:#111827; --u-t800:#1f2937; --u-t700:#374151; --u-t600:#4b5563; --u-t500:#6b7280; /* gray text */ --u-bg100:#f3f4f6; --u-bg200:#e5e7eb; --u-bg300:#d1d5db; /* gray fills */ --u-bd300:#d1d5db; /* gray border */ --u-amber50:#fffbeb; --u-red50:#fef2f2; --u-green50:#f0fdf4; --u-blue50:#eff6ff; /* tinted bg */ /* ── 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; /* extended Tier-2b semantic tokens → dark. Compliant pages read these directly (--paper sheet, --surface-2 inner fill, --line-strong, the muted-* text ramp, the ok/warn/err state badges). midnight previously overrode only the core 9, so every page that used the extended set still painted light. NOTE: --ink-2 is deliberately NOT flipped — it is dual-use (a dark-slate BACKGROUND for inverse topbars AND a text colour); pages that used it as text are fixed to --ink in the page (Prong B), leaving it valid as a dark bg. */ --paper:#101512; --surface-2:#171e1a; --line-strong:#323d37; --ink-slate:#e8ecea; --field-ink:#e8ecea; --wa-canvas:#0b141a; --wa-in:#202c33; --wa-out:#005c4b; --wa-ink:#e9edef; --wa-meta:#8696a0; --wa-daysep-bg:#182229; --wa-daysep-fg:#8696a0; --wa-quote:#025144; --c-f7f8fa:#0c110e; /* messages.html page gutter (auto-token, only used there) → dark */ --c-fbfaf3:#0f120d; --c-f8faf8:#0e1310; /* cream/near-white page BODY backgrounds used across retrofitted pages → dark */ --muted-strong:#b9c6c1; --muted-2:#93a29c; --muted-3:#6f7f79; --table-head-fg:#c0cac5; --ok-bg:#0f2418; --ok-fg:#8aedb0; --ok-line:#1f4d33; --ok-fg-2:#a7f3c8; --warn-bg:#2a2410; --warn-fg:#f2d18a; --warn-line:#4d4320; --err-bg:#2c1717; --err-fg:#f7a8a8; --err-line:#5a2a2a; --err-strong:#f78a8a; --info-soft:#141f30; --brand-soft-2:#12241a; --win-a-bg:#12241a; --win-b-bg:#141f30; --badge-f-bg:#2a2410; --badge-f-fg:#f2d18a; --badge-m-bg:#12241a; --badge-m-fg:#8aedb0; /* brand SOFT-SURFACE scale → dark (mirrors arena): the --brand-50/100 tints are color-mix'd from --brand, which tenant-theme.js can pin to a light tenant hue inline — so bg-hkpl-50/100 would glow light on dark. Pin them to dark green surfaces statically so brand-tinted cards/sections stop bleeding light. */ --brand-50:#12241a; --brand-100:#173a24; /* utility shade tokens → dark: gray TEXT lightens, gray FILLS/BORDERS + tinted backgrounds darken */ --u-t900:#e8ecea; --u-t800:#d5dcd8; --u-t700:#c0cac5; --u-t600:#a7b2ad; --u-t500:#9aa5a0; --u-bg100:#171e1a; --u-bg200:#1d2521; --u-bg300:#232d28; --u-bd300:#323d37; --u-amber50:#2a2410; --u-red50:#2c1717; --u-green50:#0f2418; --u-blue50:#141f30; 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); /* extended Tier-2b semantic tokens → dark (arena palette; muted-* already set above, --ink-2 left dual-use) */ --paper:#0c1310; --surface-2:#111c18; --line-strong:#28382f; --table-head-fg:#b9c6c1; --ink-slate:#e9f1ee; --field-ink:#e9f1ee; --wa-canvas:#0a1013; --wa-in:#12201b; --wa-out:#0c3d34; --wa-ink:#e9f1ee; --wa-meta:#8fa19b; --wa-daysep-bg:#12201b; --wa-daysep-fg:#8fa19b; --wa-quote:#0c3d34; --c-f7f8fa:#070b09; /* messages.html page gutter → dark */ --c-fbfaf3:#0a0d08; --c-f8faf8:#090d0b; /* cream/near-white page BODY backgrounds → dark */ --ok-bg:#0d2017; --ok-fg:#7fe6cf; --ok-line:#1c4a3c; --ok-fg-2:#9df0dd; --warn-bg:#241f10; --warn-fg:#f2d18a; --warn-line:#463c1e; --err-bg:#271414; --err-fg:#f7a8a8; --err-line:#552828; --err-strong:#f78a8a; --info-soft:#111b2b; --brand-soft-2:#0b221f; --win-a-bg:#0b221f; --win-b-bg:#111b2b; --badge-f-bg:#241f10; --badge-f-fg:#f2d18a; --badge-m-bg:#0b221f; --badge-m-fg:#7fe6cf; /* utility shade tokens → dark (arena is a touch darker than midnight) */ --u-t900:#e9f1ee; --u-t800:#d7e0dc; --u-t700:#b9c6c1; --u-t600:#9fb0aa; --u-t500:#8fa19b; --u-bg100:#111c18; --u-bg200:#16221d; --u-bg300:#1c2a24; --u-bd300:#28382f; --u-amber50:#241f10; --u-red50:#271414; --u-green50:#0d2017; --u-blue50:#111b2b; 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. */