/* ============================================================ Platform design tokens — EXTENSION layer (Clubhouse Broadcast) ------------------------------------------------------------ Loaded BEFORE app.css. This file only ADDS categories the original sheet lacks (type, spacing, motion, shadows, layout, pattern) and defines the opt-in dark palette. The 38 existing color/radius tokens in app.css stay canonical — do not redefine them here in :root. CLUB VALUES NEVER LIVE HERE. Club identity (primary/accent colors, crest, photos, pattern choice) flows from club settings through KH.applyBranding at runtime. These tokens are the platform's neutral chassis; branding repaints it per club. ============================================================ */ :root { /* ── Typography ───────────────────────────────────────────── THE FONT TOKENS LIVE IN daylight.css, which loads last and owns the type decision for the whole platform. They were declared here too until 30 Aug; two homes for one fact meant the Antonio→DM Sans swap silently half-applied. Do not re-add values here. Size, weight and rhythm below remain this file's own. */ --fs-xs: 12px; /* fine print, meta */ --fs-sm: 13px; /* labels, table meta */ --fs-base: 15px; /* body */ --fs-md: 17px; /* emphasized body, card titles */ --fs-lg: 20px; /* section titles */ --fs-xl: 24px; /* page titles */ --fs-2xl: 30px; /* hero titles */ --fs-3xl: 38px; /* display / broadcast date blocks */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; /* headings; safe for ja glyphs (never below 1.2) */ --lh-normal: 1.5; /* body */ --lh-relaxed: 1.7; /* long-form / ja body comfort */ --ls-tight: -0.02em; /* latin display only — NEVER on ja text */ --ls-normal: 0; --ls-wide: 0.08em; /* all-caps latin labels */ /* ── Spacing (4px base — dense-but-ordered, Japan-appropriate) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ── Layout ─────────────────────────────────────────────────── */ --max-content: 72ch; /* reading width */ --max-wide: 1080px; /* wide sections */ --max-page: 1280px; /* page shell */ --r-full: 999px; /* pill/circle (sm/md/lg = --r / --r-2 / --r-3) */ /* ── Elevation (soft ink on paper — never heavy) ────────────── */ --shadow-sm: 0 1px 2px rgba(27,27,25,0.06); --shadow-md: 0 2px 8px rgba(27,27,25,0.08), 0 1px 2px rgba(27,27,25,0.06); --shadow-lg: 0 8px 28px rgba(27,27,25,0.12), 0 2px 6px rgba(27,27,25,0.07); --shadow-focus: 0 0 0 3px var(--accent-glow); /* ── Motion ─────────────────────────────────────────────────── */ --dur-instant: 50ms; --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 400ms; --dur-slower: 600ms; /* celebration moments only (badge award pop) */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — award/confirm feedback, never navigation */ /* ── Touch ──────────────────────────────────────────────────── */ --tap-min: 44px; /* minimum hit target for one-thumb pitch-side use */ /* ── Theme pattern (seigaiha etc.) ────────────────────────────── The pattern asset is colored by the club accent at this opacity. Brief rule: never above 0.06 behind text. Clubs with theme_pattern = 'none' (the default) render no pattern at all. */ --pattern-opacity: 0.05; } /* ============================================================ Dark palette — "aizome night" (ink surfaces, paper text). OPT-IN ONLY: applied when something sets data-theme="dark" on . Deliberately NOT wired to prefers-color-scheme yet — 64 legacy modules are unaudited in dark; enabling by system preference before that QA pass would ship a broken theme. Revisit post-launch (tracked in .design/hayato-reskin). ============================================================ */ [data-theme="dark"] { --bg: #15171F; --bg-2: #1B1E29; --surface: #1F2230; --surface-2: #262A3A; --side-bg: #181B26; --border: rgba(239,233,223,0.10); --border-2: rgba(239,233,223,0.20); --hair: rgba(239,233,223,0.08); --text: #ECE8DF; /* warm paper, not pure white */ --text-2: #C4BFB4; --text-3: #8E8A80; --text-4: #5C5952; --accent: #ECE8DF; /* primary action inverts to paper */ --accent-2: #C4BFB4; --green: #6FA274; --red: #C06A5E; --amber: #C9A04E; --blue: #6E93AC; --green-tint: rgba(111,162,116,0.16); --red-tint: rgba(192,106,94,0.16); --amber-tint: rgba(201,160,78,0.16); --blue-tint: rgba(110,147,172,0.16); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35); --shadow-lg: 0 8px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); --pattern-opacity: 0.07; /* patterns need a touch more presence on ink */ }