/* THE TRAVEL SPARK — variables.css Design System: Light Lime Green — fresh, vivid, premium Core accent: #51E64C (bright lime) Complementary: warm whites, charcoal text, honey-gold prices USAGE: Imported first in every page's . All other CSS files reference these tokens via var(). */ :root { /* ── Navbar height ── */ --navbar-height: 84px; /* ── NEW COLOUR TOKENS ── */ --primary: #4A7FB5; /* medium slate blue — buttons, links, active states */ --primary-dark: #0D2E52; /* deep slate — hero bg, footer bg, dark sections */ --primary-light: #C8D8EA; /* light slate — borders, dividers, muted text on dark */ --primary-bg: #EEF2F7; /* softest tint — page bg, card bg, input fills */ --accent: #E8B84B; /* warm gold — CTAs, highlights, eyebrow labels */ --accent-dark: #C99220; /* gold hover state */ --accent-bg: #FDF6E3; /* gold tint — badges, tag backgrounds */ --text-on-dark: #C8D8EA; /* body text on dark backgrounds */ --text-primary: #0D2E52; /* all body text on white/light backgrounds */ --text-secondary: #4A7FB5; /* muted/secondary text */ /* ── Brand Colors mapped to slate blue design system ── */ --color-forest: var(--primary-dark); /* deep slate */ --color-sage: var(--primary); /* medium slate blue */ --color-sage-light: var(--primary-light); /* light slate */ --color-sage-pale: var(--primary-bg); /* soft slate tint */ --color-mint: var(--primary-light); /* light slate text on dark */ /* ── Backgrounds ── */ --color-bg-page: #FFFFFF; /* pure white body */ --color-bg-section: var(--primary-bg); /* soft slate alt section tint */ --color-bg-card: #FFFFFF; /* white cards */ --color-bg-navbar: var(--primary-bg); /* soft slate navbar bg */ --color-bg-dark: var(--primary-dark); /* deep slate footer/hero */ /* ── Accents ── */ --color-gold: var(--accent); /* warm gold */ --color-gold-dark: var(--accent-dark); /* gold hover */ --color-gold-light: var(--accent-bg); /* gold tint bg */ /* ── Text ── */ --color-text-primary: var(--text-primary); /* deep slate body text */ --color-text-secondary: var(--text-secondary); /* slate blue secondary */ --color-text-muted: var(--text-secondary); /* slate blue muted */ --color-text-on-dark: var(--text-on-dark); /* light slate text on dark bg */ --color-text-sage: var(--primary); /* links, accents on light */ --color-text-on-sage: #FFFFFF; /* white text */ --color-text-mint: var(--text-on-dark); /* light slate links on dark */ /* ── Borders ── */ --color-border: var(--primary-light); /* light slate border */ --color-border-strong: var(--primary); /* medium slate border */ /* ── Typography ── */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', system-ui, sans-serif; /* ── Spacing & Shape ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* Legacy radius aliases */ --radius: var(--radius-lg); /* ── Elevation ── */ --shadow-card: 0 2px 16px rgba(13, 46, 82, 0.07); --shadow-hover: 0 8px 32px rgba(13, 46, 82, 0.13); /* Legacy shadow aliases */ --shadow-sm: var(--shadow-card); --shadow-md: var(--shadow-hover); --shadow-lg: 0 16px 48px rgba(13, 46, 82, 0.18); /* ── Transitions ── */ --transition: 0.22s ease; /* ── Legacy variable aliases ────────────────────────────────────────────── Kept so any old var() references in existing page