/* ============================================================================= tokens.css — Horizon Inn design system, single source of truth ============================================================================= WHAT THIS IS ------------ Every colour, size, shadow, font and motion value the UI should use lives here as a CSS custom property. To change how the product looks — warmer gold, deeper shadows, a different heading font — you edit THIS one file and every surface that has been migrated to it follows. Direction: "Quiet luxury, held in firelight." Warm — charcoal, brass/gold, ember — with emerald as the secondary. NOT the cold cyan/teal that some pages currently use. See --firelight below: a warm radial glow is the product's visual signature, used sparingly (behind a hero, around the speaking assistant), never as page chrome. MIGRATION STATUS (2026-09) ------------------------- Loaded first on every page, so these names are available everywhere. The older files — styles.css, dark-theme.css, glass-theme.css — still define their own :root variables and still win for the legacy names they own (--charcoal, --text-1, --gold at #d4af37, etc.), so existing pages render exactly as before today. Those legacy blocks get retired page-by-page during the frontend rework (assistant → front desk → homepage …), and at that point the page uses only the tokens below. Open decision for the owner: the homepage currently uses a teal accent (book-theme.css, "teal glassmorphism"). The hotel's own story is firelight, not teal. When the homepage is reworked it should move onto --gold here — confirm before that phase. THE 3-STATE THEME PATTERN — do not break this -------------------------------------------- 1. :root → the complete LIGHT palette. 2. @media (prefers-color-scheme:dark) → only the tokens, guarded :root:not([data-theme="light"]) so an explicit light choice still wins. 3. :root[data-theme="dark"] → the tokens again, so a manual toggle wins in both directions. Define every colour on bare :root first. Never introduce a colour whose only definition sits inside a media/[data-theme] block. ========================================================================== */ :root { /* ---- ground & surfaces ------------------------------------------------- */ --bg: #f7f3ec; /* page background — warm paper, faint gold bias */ --bg-sunk: #efe8dc; /* recessed areas: table headers, code, wells */ --surface: #fffdf9; /* raised cards, panels, menus */ --surface-2: #f4eee3; /* a second raised level / hover on a surface */ /* ---- text ---------------------------------------------------------------- Roles, not shades. --text is body copy; --text-dim is secondary/meta; --text-faint is labels, captions, disabled. --text-on-gold is the dark ink that sits on a gold button/badge (gold is too light for white text). */ --text: #211a12; --text-dim: #665a4a; --text-faint: #948676; --text-on-gold: #1c150c; /* ---- brand accent: gold / brass --------------------------------------- */ --gold: #a97b2e; /* the accent. Links, active states, key numbers */ --gold-strong: #855d1d; /* accent text that needs more contrast */ --gold-bright: #e0b45c; /* highlights, the lit edge of the firelight */ --gold-wash: #f2e6cd; /* tint background for accent chips / selected */ /* ---- ember: the warm secondary in the firelight ---------------------- */ --ember: #bf5f33; /* ---- semantic (separate from the accent) ---------------------------- */ --ok: #3d7355; --ok-wash: #e2ede5; /* success / "keep" */ --warn: #a9781f; --warn-wash: #f5e9d0; /* caution */ --danger: #a8493a; --danger-wash: #f3e0db; /* error / destructive*/ /* ---- lines --------------------------------------------------------------- */ --hairline: #e6dcca; /* default 1px divider */ --hairline-bold: #d4c6ac; /* card border, stronger separation */ /* ---- glass (use with restraint — one or two elements per view) -------- */ --glass-bg: rgba(255, 253, 249, 0.62); --glass-border: rgba(120, 96, 54, 0.14); --glass-blur: 16px; /* ---- material: radius --------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; /* cards, panels */ --radius-lg: 22px; /* the assistant frame, modals, hero cards */ --radius-pill: 999px; /* ---- material: shadow — layered, soft, warm-tinted -------------------- */ --shadow-sm: 0 1px 2px rgba(33, 26, 18, 0.06); --shadow-md: 0 2px 6px rgba(33, 26, 18, 0.05), 0 14px 34px -16px rgba(33, 26, 18, 0.22); --shadow-lg: 0 4px 12px rgba(33, 26, 18, 0.06), 0 30px 70px -28px rgba(33, 26, 18, 0.34); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5); /* ---- the firelight signature --------------------------------------------- A warm radial glow. Drop it behind a hero, around the speaking assistant, under a key CTA. Never a full-page wash, never page chrome. */ --firelight: radial-gradient(120% 140% at 50% 0%, rgba(224, 180, 92, 0.22), rgba(191, 95, 51, 0.08) 45%, transparent 72%); --firelight-halo: 0 0 0 1px rgba(224, 180, 92, 0.35), 0 0 40px -4px rgba(224, 180, 92, 0.45), 0 0 90px -10px rgba(191, 95, 51, 0.35); /* ---- type: families ---------------------------------------------------- Display carries the "quiet luxury" personality; body stays highly legible for mixed Roman-Urdu / English operational copy; mono for data, paths, timestamps. Pages must the matching Google Fonts. */ --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- type: scale (1.20 minor-third, 16px base) ----------------------- */ --text-xs: 0.72rem; --text-sm: 0.86rem; --text-base: 1rem; --text-lg: 1.2rem; --text-xl: 1.5rem; --text-2xl: 1.95rem; --text-3xl: 2.6rem; --text-4xl: clamp(2.4rem, 6vw, 3.7rem); /* hero only */ --leading-tight: 1.15; --leading-body: 1.62; --tracking-label: 0.11em; /* uppercase eyebrows / labels */ /* ---- space scale (4px base) ---------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px; /* ---- motion ------------------------------------------------------------ Premium motion is orchestrated and physical, not scattered. One easing curve for entrances, one for exits, three durations. */ --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1); /* things arriving */ --ease-in: cubic-bezier(0.5, 0, 0.75, 0.3); /* things leaving */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* hovers, small shifts */ --dur-fast: 150ms; --dur-mid: 280ms; --dur-slow: 520ms; /* ---- layout ------------------------------------------------------------- */ --measure: 68ch; /* readable text column */ --page-max: 1180px; /* app shell max width */ --focus-ring: 2px solid var(--gold); } /* ---- DARK — OS setting, no explicit choice ------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14110d; --bg-sunk: #1a1610; --surface: #1e1a14; --surface-2: #262019; --text: #f0e7d8; --text-dim: #ab9d89; --text-faint: #7d7060; --text-on-gold: #1c150c; --gold: #d3a866; --gold-strong: #e7c28c; --gold-bright: #f0c877; --gold-wash: #2c2317; --ember: #d97e52; --ok: #74ac8a; --ok-wash: #1a2621; --warn: #d0a25a; --warn-wash: #2b2216; --danger: #d5907e; --danger-wash: #2b1d18; --hairline: #322b21; --hairline-bold: #453b2c; --glass-bg: rgba(30, 26, 20, 0.55); --glass-border: rgba(224, 180, 92, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px -18px rgba(0, 0, 0, 0.7); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 36px 84px -30px rgba(0, 0, 0, 0.8); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --firelight: radial-gradient(120% 140% at 50% 0%, rgba(224, 180, 92, 0.16), rgba(191, 95, 51, 0.06) 45%, transparent 70%); --firelight-halo: 0 0 0 1px rgba(224, 180, 92, 0.3), 0 0 44px -4px rgba(224, 180, 92, 0.4), 0 0 100px -12px rgba(191, 95, 51, 0.3); } } /* ---- DARK — explicit toggle wins over OS ------------------------------- */ :root[data-theme="dark"] { --bg: #14110d; --bg-sunk: #1a1610; --surface: #1e1a14; --surface-2: #262019; --text: #f0e7d8; --text-dim: #ab9d89; --text-faint: #7d7060; --text-on-gold: #1c150c; --gold: #d3a866; --gold-strong: #e7c28c; --gold-bright: #f0c877; --gold-wash: #2c2317; --ember: #d97e52; --ok: #74ac8a; --ok-wash: #1a2621; --warn: #d0a25a; --warn-wash: #2b2216; --danger: #d5907e; --danger-wash: #2b1d18; --hairline: #322b21; --hairline-bold: #453b2c; --glass-bg: rgba(30, 26, 20, 0.55); --glass-border: rgba(224, 180, 92, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px -18px rgba(0, 0, 0, 0.7); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 36px 84px -30px rgba(0, 0, 0, 0.8); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --firelight: radial-gradient(120% 140% at 50% 0%, rgba(224, 180, 92, 0.16), rgba(191, 95, 51, 0.06) 45%, transparent 70%); --firelight-halo: 0 0 0 1px rgba(224, 180, 92, 0.3), 0 0 44px -4px rgba(224, 180, 92, 0.4), 0 0 100px -12px rgba(191, 95, 51, 0.3); } /* ---- shared primitives every migrated page can rely on ------------------ These are the only *rules* (not variables) in this file — the bare minimum so a freshly-built page needs nothing but tokens.css to start. Legacy pages already have their own resets and are unaffected. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .hz-focusable:focus-visible, .hz a:focus-visible, .hz button:focus-visible, .hz input:focus-visible, .hz select:focus-visible, .hz textarea:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } /* Opt-in base: add class="hz" to on a page built against tokens.css. */ .hz { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } .hz h1, .hz h2, .hz h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); text-wrap: balance; } .hz code, .hz kbd, .hz samp { font-family: var(--font-mono); font-size: 0.88em; }