/* ========================================================================== Sri Lanka Travel Tours — Homepage ========================================================================== */ :root { /* ---- Legacy aliases (kept as-is so nothing on the site shifts) ---- */ --slt-red: #ff1717; --slt-blue: #1769ff; --slt-green: #1AAE4B; --slt-green-hover: #168f3e; --slt-ink: #121212; --slt-gray-600: #5b5b5b; --slt-gray-200: #e6e6e6; --slt-gray-50: #f7f7f8; --slt-white: #ffffff; /* ---- Brand ramps — see BRAND-GUIDELINES.md for usage rules ---- */ --slt-red-50: #fff3f3; --slt-red-100: #ffe8e8; --slt-red-200: #ffb9b9; --slt-red-300: #ff8b8b; --slt-red-400: #ff5d5d; --slt-red-500: #ff1717; --slt-red-600: #d91414; --slt-red-700: #b31010; --slt-red-800: #8c0d0d; --slt-red-900: #660909; --slt-blue-50: #f3f8ff; --slt-blue-100: #e8f0ff; --slt-blue-200: #b9d2ff; --slt-blue-300: #8bb4ff; --slt-blue-400: #5d96ff; --slt-blue-500: #1769ff; --slt-blue-600: #1459d9; --slt-blue-700: #104ab3; --slt-blue-800: #0d3a8c; --slt-blue-900: #092a66; --slt-slate-50: #f9f9f9; --slt-slate-100: #eff0f0; --slt-slate-200: #d7d8d9; --slt-slate-300: #aeb2b4; --slt-slate-400: #868b8e; --slt-slate-500: #65696d; --slt-slate-600: #353e43; --slt-slate-700: #2d3539; --slt-slate-800: #252b2f; --slt-slate-900: #1d2225; --slt-gold-400: #d4af6a; --slt-gold-500: #c79a3e; --slt-gold-600: #a87f2e; /* ---- Semantic roles — what to reach for, not which hex ---- */ --slt-text-primary: var(--slt-slate-900); --slt-text-secondary: var(--slt-slate-500); --slt-text-muted: var(--slt-slate-400); --slt-text-on-brand: var(--slt-white); --slt-surface: var(--slt-white); --slt-surface-subtle: var(--slt-slate-50); --slt-border: var(--slt-slate-200); --slt-border-strong: var(--slt-slate-300); --slt-action: var(--slt-blue-500); --slt-action-hover: var(--slt-blue-600); --slt-action-active: var(--slt-blue-700); --slt-urgent: var(--slt-red-500); --slt-urgent-hover: var(--slt-red-600); --slt-urgent-subtle-bg: var(--slt-red-50); --slt-urgent-subtle-text: var(--slt-red-700); --slt-success: var(--slt-green); --slt-success-hover: var(--slt-green-hover); --slt-warning: #f59e0b; --slt-warning-subtle-bg: #fef3e2; --slt-warning-subtle-text: #92400e; --slt-link: var(--slt-blue-500); --slt-link-hover: var(--slt-blue-400); --slt-link-visited: var(--slt-blue-800); --slt-highlight-bg: var(--slt-blue-100); --slt-highlight-text: var(--slt-blue-800); --slt-message-bg: var(--slt-slate-50); --slt-message-border: var(--slt-slate-200); --slt-message-text: var(--slt-slate-700); --slt-alert-bg: var(--slt-red-50); --slt-alert-border: var(--slt-red-200); --slt-alert-text: var(--slt-red-700); --slt-container-max: 1320px; --slt-radius-sm: 6px; --font-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---- Dark theme ---- Only the structural tokens flip (surface, ink, the gray scale, and the semantic aliases built on top of them). --slt-white stays literally white on purpose — it's also used as on-color text for colored buttons (e.g. white text on a blue button), which must stay white in both themes. Toggled via [data-theme] on , set by js/theme.js. */ :root[data-theme="dark"] { --slt-surface: #14171a; --slt-ink: #f1f1f1; --slt-gray-600: #aeb2b4; --slt-gray-200: #353e43; --slt-gray-50: #1d2225; --slt-text-primary: #f1f1f1; --slt-text-secondary: #aeb2b4; --slt-text-muted: #868b8e; --slt-surface-subtle: #1d2225; --slt-border: #353e43; --slt-border-strong: #65696d; /* Semantic tint tokens (highlight spans, warning banners) built from the light-mode numbered ramps above — without an override here they silently keep their light-mode pastel value (e.g. --slt-blue-100) in dark mode, leaving a light patch behind dark-mode text. */ --slt-highlight-bg: rgba(139, 180, 255, 0.16); --slt-highlight-text: var(--slt-blue-300); --slt-warning-subtle-bg: rgba(245, 158, 11, 0.16); --slt-warning-subtle-text: #fbbf6b; /* Tells the browser to render native form-control chrome (the