/* ════════════════════════════════════════════════════════════ yutie-brand-tokens.css · chunk 4.1.1 (2026-05-19) ───────────────────────────────────────────────────────────── Brand CSS variable definitions, extracted (copied, not moved) from yutie-brand.css for reachability on surfaces that do NOT load yutie-brand.css through the admin or customer head hooks. This file contains ONLY :root variable definitions plus the [data-theme="light"] override block. No rules, no !important, no layout properties, no selectors beyond :root and [data-theme="light"]. Loaded by yutie_brand.php on the app_external_form_head hook at priority 5 (lower than yutie_appointments's priority 10, so tokens are defined before consumer CSS references them). ───────────────────────────────────────────────────────────── Reachability gap closed. yutie-brand.css splits its variables across three blocks: :root - foundation tokens (gold, three states, easing, radii, blur, fonts) [data-theme="dark"] - theme-conditional (--bg, --text, --glass, --rule, --shadow, --noise) [data-theme="light"] - light overrides The public external form (Appointly today, Flexform in Phase 5, future modules emitting app_external_form_head) has no data-theme attribute set on . Variables defined only inside [data-theme="dark"] would resolve to initial on that surface. This file flattens the dark-theme block into :root as the unconditional default, then keeps [data-theme="light"] as an override for any future surface that opts into light theme. ───────────────────────────────────────────────────────────── Source of truth. yutie-brand.css remains the canonical token declaration for admin and customer surfaces. This file mirrors those values. If a brand token changes value, update both files. Chunk 4.1.2 (optional follow-up) would eliminate the duplication by having yutie-brand.css @import this file or by moving the :root declarations here and importing from yutie-brand.css. ═══════════════════════════════════════════════════════════ */ :root { /* Gold palette */ --gold: #C9A84C; --gold-lt: #E2C47A; --gold-dp: #A07E28; --gold-pale: rgba(201,168,76,0.12); --gold-line: rgba(201,168,76,0.35); --gold-glow: rgba(201,168,76,0.30); --gold-btn: rgba(201,168,76,0.22); /* Three states · only three */ --tending: #6EE7B7; --tending-bg: rgba(110,231,183,0.10); --tending-line: rgba(110,231,183,0.28); --tending-glow: rgba(110,231,183,0.35); --waiting: #C9A84C; --waiting-bg: rgba(201,168,76,0.12); --quiet: #9A9890; --quiet-bg: rgba(154,152,144,0.08); --quiet-line: rgba(154,152,144,0.22); /* Easing */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Radii */ --r: 18px; --r-sm: 12px; --r-xs: 8px; /* Glass blur */ --blur: blur(22px) saturate(1.7); /* Fonts */ --spartan: 'League Spartan', sans-serif; --outfit: 'Outfit', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --serif: 'Fraunces', Georgia, serif; /* Theme colors · default = dark (matches yutie-brand.css [data-theme="dark"] block verbatim). External forms have no data-theme attribute, so these defaults apply unconditionally. Surfaces that set data-theme="light" pick up the override block below. */ --bg: #080809; --text: #edeae4; --text2: rgba(237,234,228,0.62); --text3: rgba(237,234,228,0.34); --text4: rgba(237,234,228,0.16); --glass: rgba(255,255,255,0.055); --glass-b: rgba(255,255,255,0.11); --glass-hi: rgba(255,255,255,0.10); --glass-2: rgba(255,255,255,0.085); --rule: rgba(255,255,255,0.06); --rule-2: rgba(255,255,255,0.10); --noise: 0.03; --shadow: rgba(0,0,0,0.55); } [data-theme="light"] { --bg: #f4f1eb; --text: #111110; --text2: rgba(17,17,16,0.60); --text3: rgba(17,17,16,0.34); --text4: rgba(17,17,16,0.18); --glass: rgba(255,255,255,0.48); --glass-b: rgba(255,255,255,0.82); --glass-hi: rgba(255,255,255,0.95); --glass-2: rgba(255,255,255,0.65); --rule: rgba(0,0,0,0.07); --rule-2: rgba(0,0,0,0.12); --noise: 0.018; --shadow: rgba(0,0,0,0.12); } /* ════════════════════════════════════════════════════════════ End yutie-brand-tokens.css ═══════════════════════════════════════════════════════════ */