/* ───────────────────────────────────────────────────────────────────────── Thila Hotels — Design Tokens ───────────────────────────────────────────────────────────────────────── The single source of truth for motion, spacing, radius, shadow, colour, and typography across every surface (website, cancel, pms, owner, guest-request, upload-passport). Built per the council verdict (AUDIT_COUNCIL_VERDICT.md, Refactor I). Replaces: - 60+ ad-hoc `transition: all` calls (Reviewer A + C) - 5 different spellings of "gold" across files (Reviewer C) - 10 different border-radii in active use (Reviewer C) - bespoke per-file shadows (Reviewer C) - eight different easing curves (Reviewer C) - `--ease` references that silently fell back to browser default because the variable was never declared (Reviewer A + C) Brand axis kept as-is: champagne gold + cream + ink + Cormorant Garamond display + Jost UI. Tokens below are the authoritative values; if a surface needs a different value it should override LOCALLY, not invent a new spelling. ───────────────────────────────────────────────────────────────────── */ :root { /* ── Motion ────────────────────────────────────────────────────────── */ /* Strong custom curves per Emil Kowalski's design-eng skill. Browser default `ease` is too weak; UI-grade custom curves give the punch that makes interactions feel intentional. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* UI in/out */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-style drawer */ --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1); /* gentle bounce (rare) */ /* Back-compat alias for legacy var(--ease, ease) refs. */ --ease: cubic-bezier(0.23, 1, 0.32, 1); /* Durations — Emil's "stay under 300ms for UI" rule. Tooltip 125 · Dropdown 180 · Modal 240 · Drawer 320 · Hero 600 */ --duration-instant: 80ms; /* keyboard-frequent (no animation in spirit) */ --duration-fast: 160ms; /* button press, hover swap */ --duration-base: 220ms; /* dropdowns, popovers, toasts */ --duration-slow: 320ms; /* modals, drawers */ --duration-hero: 600ms; /* hero crossfade, marketing reveals */ /* ── Spacing scale ─────────────────────────────────────────────────── */ /* 4 px rhythm. Use these instead of arbitrary values. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ── Radius ───────────────────────────────────────────────────────── */ /* Four steps. Buttons / inputs use --radius-sm; cards --radius-md; modals --radius-lg; pills --radius-pill. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; /* ── Shadow ───────────────────────────────────────────────────────── */ /* Four layers, warm-tinted to match the cream/gold palette. Pick the lowest layer that works — shadow inflation is a taste tax. */ --shadow-1: 0 1px 2px rgba(20, 12, 4, .06), 0 1px 1px rgba(20, 12, 4, .04); --shadow-2: 0 4px 12px -2px rgba(20, 12, 4, .12), 0 2px 4px rgba(20, 12, 4, .06); --shadow-3: 0 12px 32px -8px rgba(20, 12, 4, .18), 0 4px 12px rgba(20, 12, 4, .08); --shadow-4: 0 32px 80px rgba(20, 12, 4, .35); /* modal-grade */ /* Gold-tinted glow for primary CTAs */ --shadow-gold: 0 8px 28px -8px rgba(196, 160, 48, .50); --shadow-gold-hi: 0 12px 40px -8px rgba(196, 160, 48, .65); /* ── Colour — gold scale ──────────────────────────────────────────── */ /* Single canonical gold ladder. Stop using ad-hoc hexes like #C2A572, #C9A84C, #A88838, #8A6F3B, #A88C5A — they all collapse to: */ --gold-50: #FBF5E1; --gold-100: #F4E5B8; --gold-200: #E6D192; --gold-300: #DCC494; /* surface-anchor on dark backgrounds */ --gold-400: #C9A84C; /* "champagne" — primary brand */ --gold-500: #C2A572; /* button anchor on dark */ --gold-600: #A88838; /* AA-cleared body gold on cream (4.5:1) */ --gold-700: #8A6F3B; /* AA-cleared deep gold on cream (4.7:1+) */ --gold-800: #6B5430; --gold-900: #4A3A20; /* Convenience aliases — surfaces already use these names heavily. Map them to the canonical scale so the visual identity stays consistent without churning every file at once. */ --gold: var(--gold-400); /* legacy "gold" lands on champagne */ --gold-bright: var(--gold-300); --gold-on-cream: var(--gold-700); /* AA-safe gold for body text on cream */ --gold-deep: var(--gold-700); /* ── Colour — cream ladder ───────────────────────────────────────── */ --cream-50: #FBF7EC; /* paper / page bg on cream surfaces */ --cream-100: #F4ECDB; /* card */ --cream-200: #E8DEC6; /* hairline / divider */ --cream-300: #DCD0B0; /* mid-warm */ --cream-ink: #1F1A10; /* primary text on cream */ --cream-ink2: #4A3F28; /* secondary text on cream */ /* ── Colour — ink ladder (dark surfaces) ─────────────────────────── */ --ink-deep: #060403; --ink: #0E0A06; --ink-2: #18120A; --ink-3: #221A0F; --ink-4: #2D2316; /* ── Status colours ──────────────────────────────────────────────── */ /* Each comes in a -bg / -border / -text triplet so warning/error/success surfaces never fight the brand palette. */ --sage: #5A8A6A; --sage-bg: rgba(124, 159, 77, .14); --sage-border: rgba(124, 159, 77, .42); --amber: #C4842A; --amber-bg: rgba(221, 161, 58, .14); --amber-border: rgba(221, 161, 58, .42); --coral: #D4614A; --coral-bg: rgba(214, 84, 63, .12); --coral-border: rgba(214, 84, 63, .42); /* ── Typography ──────────────────────────────────────────────────── */ /* Two stacks: display (Cormorant Garamond serif) for hero/marketing, UI (Jost sans) for everything functional. RTL gets a Thaana stack. */ --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-ui: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-rtl: 'MV Faruma', 'Noto Sans Thaana', sans-serif; /* Type scale — display + UI ladders. Use these tokens in new code; existing code can adopt at its leisure. */ --text-xxs: 10px; /* eyebrow / micro labels */ --text-xs: 11px; /* table cells, pills */ --text-sm: 13px; /* body small */ --text-base: 14px; /* body */ --text-md: 16px; /* lead / large body */ --text-lg: 20px; --text-xl: 28px; --text-2xl: 40px; --text-3xl: 56px; --text-display: clamp(56px, 11vw, 156px); /* hero title */ --leading-tight: 1.1; --leading-snug: 1.4; --leading-base: 1.6; --leading-relaxed: 1.8; /* Letter-spacing — uppercase eyebrow tradition + body tightness */ --tracking-tight: -0.5px; --tracking-base: 0; --tracking-wide: 1px; --tracking-eyebrow: 2.5px; /* ── Z-index scale ───────────────────────────────────────────────── */ /* Stop the modal-vs-toast-vs-tooltip wars. */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; --z-tooltip: 1500; --z-system: 2000; /* PWA install prompt, system banners */ /* ── Layout — common */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }