/* colors.css — BookingBreeze Design Token System */ @layer reset, base, components, modules, utilities; @layer base { :root { /* ============================================================================ TIER 1: PRIMITIVES (Raw OKLCH Values) ============================================================================ */ /* Depths (Background Hierarchy) */ --lch-depth-950: 10% 0.015 220; --lch-depth-900: 14% 0.02 220; --lch-depth-800: 20% 0.025 220; --lch-depth-700: 28% 0.03 220; /* Teal (Primary Brand) */ --lch-teal: 72% 0.14 195; /* Neutral Grays */ --lch-white: 98% 0 0; --lch-gray: 64% 0.01 220; /* Extra Accents */ --lch-ocean-blue: 68% 0.16 240; --lch-coral: 72% 0.16 25; --lch-emerald: 72% 0.15 165; --lch-amber: 82% 0.14 85; /* Status Colors */ --lch-danger: 62% 0.22 25; --lch-success: 75% 0.16 165; --lch-warning: 82% 0.15 85; /* Marketing Palette — independent hospitality identity */ --lch-ink: 12% 0.006 245; --lch-ink-soft: 31% 0.012 245; --lch-sand: 100% 0 0; --lch-paper: 100% 0 0; --lch-mist: 96% 0.006 220; --lch-breeze: 79% 0.16 174; --lch-breeze-deep: 50% 0.13 183; --lch-sun: 92% 0.045 174; --lch-coral-soft: 89% 0.05 174; /* ============================================================================ TIER 2: SEMANTICS (Named Variables) ============================================================================ */ /* Color Palette */ --depth-950: oklch(var(--lch-depth-950)); --depth-900: oklch(var(--lch-depth-900) / 0.95); --depth-800: oklch(var(--lch-depth-800)); --depth-700: oklch(var(--lch-depth-700)); --brand-teal: oklch(var(--lch-teal)); --brand-teal-dim: oklch(var(--lch-teal) / 0.1); --brand-white: oklch(var(--lch-white)); --brand-gray: oklch(var(--lch-gray)); /* Accents */ --accent-primary: oklch(var(--lch-teal)); --accent-blue: oklch(var(--lch-ocean-blue)); --accent-coral: oklch(var(--lch-coral)); --accent-emerald: oklch(var(--lch-emerald)); --accent-amber: oklch(var(--lch-amber)); /* Status */ --danger: oklch(var(--lch-danger)); --success: oklch(var(--lch-success)); --warning: oklch(var(--lch-warning)); /* Fonts */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Space Grotesk', var(--font-sans); --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05); --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.08); --shadow-lg: 0 10px 25px oklch(0% 0 0 / 0.12); --shadow-glow: 0 0 20px oklch(var(--lch-teal) / 0.3); } /* ============================================================================ DARK THEME (Default) ============================================================================ */ [data-theme="dark"], :root { --bg-main: var(--depth-950); --bg-surface: var(--depth-900); --bg-card: var(--depth-800); --bg-elevated: var(--depth-700); --text-main: var(--brand-white); --text-muted: var(--brand-gray); --text-on-accent: oklch(15% 0.02 220); --text-on-danger: var(--brand-white); --border-color: oklch(var(--lch-depth-700) / 0.5); } /* ============================================================================ MARKETING THEME ============================================================================ */ [data-theme="marketing"] { --bg-main: oklch(var(--lch-paper)); --bg-surface: oklch(var(--lch-paper)); --bg-card: oklch(var(--lch-mist)); --bg-elevated: oklch(93% 0.008 220); --text-main: oklch(var(--lch-ink)); --text-muted: oklch(var(--lch-ink-soft)); --text-on-accent: oklch(var(--lch-ink)); --text-on-danger: oklch(var(--lch-paper)); --accent-primary: oklch(var(--lch-breeze)); --accent-breeze: oklch(var(--lch-breeze)); --accent-coral: oklch(var(--lch-coral-soft)); --accent-amber: oklch(var(--lch-sun)); --marketing-ink: oklch(var(--lch-ink)); --marketing-ink-soft: oklch(var(--lch-ink-soft)); --marketing-sand: oklch(var(--lch-paper)); --marketing-paper: oklch(var(--lch-paper)); --marketing-mist: oklch(var(--lch-mist)); --marketing-media-start: oklch(88% 0.035 224); --marketing-media-end: oklch(79% 0.08 194); --marketing-ui-background: oklch(97% 0.005 220); --marketing-roadmap-background: oklch(94% 0.025 35); --marketing-roadmap-text: oklch(42% 0.1 35); --border-color: oklch(var(--lch-ink) / 0.16); --focus-ring: oklch(var(--lch-breeze-deep)); --focus-ring-offset: oklch(var(--lch-paper)); --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-display: 'Manrope', var(--font-sans); --radius-sm: 2px; --radius-md: 4px; --radius-lg: 4px; --radius-xl: 4px; --shadow-sm: 0 1px 2px oklch(var(--lch-ink) / 0.05); --shadow-md: 0 8px 24px oklch(var(--lch-ink) / 0.08); --shadow-lg: 0 20px 50px oklch(var(--lch-ink) / 0.12); --shadow-glow: none; } /* ============================================================================ PRODUCT THEME — marketing identity adapted for dense operator work ============================================================================ */ [data-theme="product"] { --bg-main: oklch(97% 0.005 220); --bg-surface: oklch(var(--lch-paper)); --bg-card: oklch(var(--lch-mist)); --bg-elevated: oklch(93% 0.008 220); --text-main: oklch(var(--lch-ink)); --text-muted: oklch(var(--lch-ink-soft)); --text-on-accent: oklch(var(--lch-ink)); --text-on-danger: oklch(var(--lch-paper)); --accent-primary: oklch(var(--lch-breeze)); --accent-breeze: oklch(var(--lch-breeze)); --marketing-ink: oklch(var(--lch-ink)); --marketing-paper: oklch(var(--lch-paper)); --marketing-mist: oklch(var(--lch-mist)); --marketing-media-start: oklch(88% 0.035 224); --marketing-media-end: oklch(79% 0.08 194); --success: oklch(48% 0.13 165); --warning: oklch(56% 0.13 72); --danger: oklch(53% 0.2 25); --border-color: oklch(var(--lch-ink) / 0.14); --focus-ring: oklch(var(--lch-breeze-deep)); --focus-ring-offset: oklch(var(--lch-paper)); --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-display: 'Manrope', var(--font-sans); --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --shadow-sm: 0 1px 2px oklch(var(--lch-ink) / 0.05); --shadow-md: 0 8px 24px oklch(var(--lch-ink) / 0.07); --shadow-lg: 0 24px 60px oklch(var(--lch-ink) / 0.1); --shadow-glow: none; } /* ============================================================================ LIGHT THEME ============================================================================ */ [data-theme="light"] { --bg-main: oklch(97% 0.005 220); --bg-surface: oklch(100% 0 0); --bg-card: oklch(95% 0.005 220); --bg-elevated: oklch(92% 0.008 220); --text-main: oklch(15% 0.02 220); --text-muted: oklch(45% 0.02 220); --text-on-accent: oklch(15% 0.02 220); --text-on-danger: var(--brand-white); --border-color: oklch(85% 0.01 220); } } /* ============================================================================ TIER 3: UTILITIES (Dynamic Tints via color-mix) ============================================================================ */ @layer utilities { :root { --teal-10: color-mix(in oklch, var(--accent-primary), transparent 90%); --teal-20: color-mix(in oklch, var(--accent-primary), transparent 80%); --teal-50: color-mix(in oklch, var(--accent-primary), transparent 50%); --danger-10: color-mix(in oklch, var(--danger), transparent 90%); --success-10: color-mix(in oklch, var(--success), transparent 90%); --warning-10: color-mix(in oklch, var(--warning), transparent 90%); } }