/* ===================================================================== * Hotelrank × Lighthouse — Design Tokens * --------------------------------------------------------------------- * Source of truth for colors, typography, spacing, radii, and shadows. * Primary brand color is Lighthouse Blaze Orange (#FF5B06). * Neutrals, semantic colors, and chart palette inherit from the existing * Hotelrank system. * * Usage: * * color: var(--color-primary); * * Add `data-theme="dark"` to or to switch to dark mode. * ===================================================================== */ :root { /* ---------- Brand ---------- */ --color-brand-50: #FFF1EB; --color-brand-100: #FFE0CE; --color-brand-200: #FFC097; --color-brand-300: #FFA060; --color-brand-400: #FF8033; --color-brand-500: #FF5B06; /* Lighthouse Blaze Orange — PRIMARY */ --color-brand-600: #E14D00; --color-brand-700: #B83F00; --color-brand-800: #8C3000; --color-brand-900: #5C2000; --color-primary: var(--color-brand-500); --color-primary-hover: var(--color-brand-600); --color-primary-active: var(--color-brand-700); --color-primary-soft: var(--color-brand-50); --color-primary-on: #FFFFFF; /* text on primary */ /* ---------- Neutrals ---------- */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F8F9FA; --color-neutral-100: #F1F3F5; --color-neutral-200: #E9ECEF; --color-neutral-300: #DEE2E6; --color-neutral-400: #CED4DA; --color-neutral-500: #ADB5BD; --color-neutral-600: #6C757D; --color-neutral-700: #495057; --color-neutral-800: #343A40; --color-neutral-900: #212529; --color-neutral-1000: #0F0F0F; /* ---------- Semantic ---------- */ --color-success: #019C00; --color-success-bg: #E5F4E5; --color-warning: #FFC502; --color-warning-bg: #FFF8E0; --color-danger: #C11F1F; --color-danger-bg: #FBE5E5; --color-info: #1AA7EE; --color-info-bg: #E3F4FD; /* ---------- Surfaces (light mode) ---------- */ --bg-canvas: var(--color-neutral-50); /* page background */ --bg-surface: var(--color-neutral-0); /* cards, panels */ --bg-raised: var(--color-neutral-0); /* modals, popovers */ --bg-sunken: var(--color-neutral-100); /* inputs, wells */ --bg-muted: var(--color-neutral-200); /* hover rows, chips */ --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-700); --text-muted: var(--color-neutral-600); --text-disabled: var(--color-neutral-500); --text-inverse: var(--color-neutral-0); --text-link: var(--color-brand-600); --text-link-hover:var(--color-brand-700); --border-subtle: var(--color-neutral-200); --border-default: var(--color-neutral-300); --border-strong: var(--color-neutral-400); --border-focus: var(--color-brand-500); /* ---------- Chart palette (preserved from Hotelrank) ---------- */ /* Use in this order for consistent multi-series charts. */ --chart-1: #FF5B06; /* brand orange — leading series */ --chart-2: #1AA7EE; /* sky blue */ --chart-3: #007D8E; /* teal */ --chart-4: #88E99A; /* mint */ --chart-5: #019C00; /* green */ --chart-6: #FFC502; /* yellow */ --chart-7: #FF6283; /* pink */ --chart-8: #9654E5; /* purple */ --chart-9: #4328E7; /* indigo (legacy primary) */ --chart-10: #29DAE4; /* aqua */ --chart-11: #C11F1F; /* red */ /* ---------- Typography ---------- */ --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type scale — modular, base 16px */ --text-xs: 0.75rem; /* 12 — captions, labels */ --text-sm: 0.875rem; /* 14 — secondary body, table cells */ --text-base: 1rem; /* 16 — body */ --text-lg: 1.125rem; /* 18 — emphasised body */ --text-xl: 1.25rem; /* 20 — small headings */ --text-2xl: 1.5rem; /* 24 — H3 */ --text-3xl: 1.875rem; /* 30 — H2 */ --text-4xl: 2.25rem; /* 36 — H1 */ --text-5xl: 3rem; /* 48 — display */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ---------- Spacing — 4px base scale ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* ---------- Radius ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; /* default for buttons, inputs, chips */ --radius-lg: 12px; /* cards */ --radius-xl: 16px; /* large cards, modals */ --radius-2xl: 24px; /* hero panels */ --radius-full: 9999px; /* ---------- Shadows ---------- */ --shadow-xs: 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-sm: 0 1px 3px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-md: 0 4px 8px -2px rgba(15, 15, 15, 0.08), 0 2px 4px -2px rgba(15, 15, 15, 0.04); --shadow-lg: 0 12px 24px -8px rgba(15, 15, 15, 0.12), 0 4px 8px -4px rgba(15, 15, 15, 0.06); --shadow-xl: 0 24px 48px -12px rgba(15, 15, 15, 0.18); --shadow-focus: 0 0 0 3px rgba(255, 91, 6, 0.25); /* brand-tinted focus ring */ --shadow-brand: 0 8px 24px -8px rgba(255, 91, 6, 0.45); /* ---------- Layout ---------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* ---------- Motion ---------- */ --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-emphasis: cubic-bezier(0.3, 0, 0.1, 1); /* ---------- Z-index ---------- */ --z-dropdown: 1000; --z-sticky: 1020; --z-overlay: 1040; --z-modal: 1050; --z-popover: 1060; --z-toast: 1070; } /* ===================================================================== * Dark theme — apply with [data-theme="dark"] on or * ===================================================================== */ [data-theme="dark"] { --bg-canvas: var(--color-neutral-1000); --bg-surface: #1A1A1A; --bg-raised: #242424; --bg-sunken: #141414; --bg-muted: #2A2A2A; --text-primary: #FFFFFF; --text-secondary: #D0D0D0; --text-muted: #A0A0A0; --text-disabled: #6C757D; --text-inverse: var(--color-neutral-900); --text-link: var(--color-brand-300); --text-link-hover:var(--color-brand-200); --border-subtle: #2A2A2A; --border-default: #333333; --border-strong: #404040; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6); --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7); } /* ===================================================================== * Base resets — opt-in. Comment out if integrating with Bootstrap/Tailwind. * ===================================================================== */ .ds-base { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===================================================================== * Component primitives — minimal, opt-in classes * ===================================================================== */ /* Button */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: 1; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); } .ds-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .ds-btn[disabled] { opacity: 0.5; cursor: not-allowed; } .ds-btn--primary { background: var(--color-primary); color: var(--color-primary-on); } .ds-btn--primary:hover { background: var(--color-primary-hover); } .ds-btn--primary:active { background: var(--color-primary-active); } .ds-btn--secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); } .ds-btn--secondary:hover { background: var(--bg-muted); } .ds-btn--ghost { background: transparent; color: var(--text-primary); } .ds-btn--ghost:hover { background: var(--bg-muted); } .ds-btn--danger { background: var(--color-danger); color: #FFFFFF; } /* Card */ .ds-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } /* Input */ .ds-input { width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); } .ds-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); } /* Badge */ .ds-badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-brand-700); } .ds-badge--success { background: var(--color-success-bg); color: var(--color-success); } .ds-badge--warning { background: var(--color-warning-bg); color: #8C6D00; } .ds-badge--danger { background: var(--color-danger-bg); color: var(--color-danger); } .ds-badge--info { background: var(--color-info-bg); color: var(--color-info); }