/* ============================================================================= Tours Booking — Design Tokens Source of truth: brand/style-guide.pdf Two layers: 1. Primitives --tb-* the brand palette, verbatim from the guide. Never use these directly in components. 2. Semantic --surface-*, --text-*, --accent-*, --border-* what components actually reference. Recolouring the site means remapping the semantic layer, not the primitives. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. COLOUR PRIMITIVES --------------------------------------------------------------------------- */ /* Core — brand recognition. Approved for the logo (single-colour only). */ --tb-ble-losean: #0084C6; /* primary brand blue */ --tb-lagon-moris: #46CAC7; /* secondary — lagoon turquoise */ --tb-ble-aswar: #10263A; /* deep navy — text & dark surfaces */ --tb-nwar-volkan: #1A1F26; /* shared foundation dark */ --tb-nwar-bazalt: #111111; /* shared foundation black */ /* Core neutrals */ --tb-blan-lekim-vag: #F7FAE9; /* sea-foam white */ --tb-krem-vakwa: #F6F1E8; /* warm cream */ --tb-blan-blan: #FFFFFF; /* Digital neutrals */ --tb-gri-la-pli: #E6E0DB; /* rain grey */ --tb-disab-moris: #F3E2C1; /* island sand */ --tb-roz-koray: #FAE2D9; /* coral blush */ /* Supporting accents — 10% of the palette, collectively. Use selectively. */ --tb-zonn-soley-moris: #E0C428; /* sun yellow */ --tb-koray-moris: #FF491C; /* coral orange */ --tb-vert-karo-kann: #349A46; /* sugarcane green */ --tb-roz-bougainvillier:#AA0B48; /* bougainvillea */ /* Tint ramps — the 75/50/25 steps printed on style-guide p.10. These are the exact fills read out of the PDF, not calculated tints. */ --tb-ble-losean-75: #40A3D4; --tb-ble-losean-50: #80C2E2; --tb-ble-losean-25: #BFE0F1; --tb-lagon-moris-75: #74D7D5; --tb-lagon-moris-50: #A2E4E3; --tb-lagon-moris-25: #D1F2F1; --tb-ble-aswar-75: #4C5C6B; --tb-ble-aswar-50: #87939D; --tb-ble-aswar-25: #C3C9CE; /* --------------------------------------------------------------------------- DERIVED INTERACTION SHADES — extensions beyond the printed guide. Ble Losean at full strength is 4.10:1 against white. That clears AA for large text and UI borders but fails the 4.5:1 needed for body-size text and button labels. These two shades keep the hue and fix the contrast. They are interface colours only — never recolour the logo with them. --------------------------------------------------------------------------- */ --tb-ble-losean-deep: #0070A8; /* 5.41:1 on white — buttons, links on light */ --tb-ble-losean-deeper: #005C8B; /* 7.23:1 on white — hover / pressed */ /* Gris Ros is named on style-guide p.8 and p.12 but never given a hex in the palette pages. This value is the actual vector fill read out of the PDF (the p.8 logo background), so it is measured, not guessed. */ --tb-gris-ros: #E5E7EB; /* --------------------------------------------------------------------------- 2. SEMANTIC COLOUR — light theme (the site default) Follows the guide's hierarchy: 35% neutrals, 25% Ble Losean, 20% Ble Aswar, 10% Lagon Moris, 10% supporting. --------------------------------------------------------------------------- */ /* Surfaces. Only these two — dark and tinted surfaces come from the theme classes below, so that a background can never be set without the matching text, border and focus colours coming with it. */ --surface-page: var(--tb-krem-vakwa); --surface-raised: var(--tb-blan-blan); /* Text on light surfaces */ --text-primary: var(--tb-ble-aswar); /* 13.72:1 on Krem Vakwa */ --text-secondary: #46586B; /* 6.51:1 on Krem Vakwa */ /* Muted carries small text — captions, hints, uppercase field labels — so it has to clear 4.5:1 on every light neutral, not just on white. This is the darkest of them (Gri La Pli) at 4.55:1. */ --text-muted: #586573; --text-link: var(--tb-ble-losean-deep); --text-link-hover: var(--tb-ble-losean-deeper); /* Eyebrow / section label. Set at 13px semibold, so it needs the full 4.5:1 — true Ble Losean only reaches 3.65:1 on cream. */ --text-eyebrow: var(--tb-ble-losean-deep); /* Text on dark surfaces */ --text-on-inverse: var(--tb-blan-lekim-vag); --text-on-inverse-secondary:#B9C4CF; /* 8.72:1 on Ble Aswar */ --text-on-inverse-accent: var(--tb-lagon-moris); /* 7.74:1 on Ble Aswar */ /* Accents. One dominant accent per section — see the pairing rules. */ --accent-primary: var(--tb-ble-losean); --accent-secondary: var(--tb-lagon-moris); --accent-warm: var(--tb-koray-moris); --accent-sun: var(--tb-zonn-soley-moris); --accent-deep: var(--tb-roz-bougainvillier); /* Borders & dividers */ --border-subtle: rgba(16, 38, 58, 0.10); --border-strong: rgba(16, 38, 58, 0.22); --border-on-inverse: rgba(247, 250, 233, 0.16); /* Focus ring — must clear 3:1 against both light and dark surfaces */ --focus-ring: var(--tb-ble-losean-deep); --focus-ring-inverse: var(--tb-lagon-moris); /* Feedback */ --state-success: var(--tb-vert-karo-kann); --state-error: var(--tb-roz-bougainvillier); --state-warning: var(--tb-koray-moris); /* --------------------------------------------------------------------------- 3. TYPOGRAPHY Fraunces — expressive: hero, campaign, editorial titles, quotes Alan Sans — functional: nav, body, buttons, labels, captions Tropical Magic — rare accent. Never in the same headline as Fraunces. --------------------------------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Alan Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-accent: "Tropical Magic", var(--font-display); /* Fluid scale — 360px to 1440px viewport. The display sizes are set for Fraunces Black at opsz 9. That cut is considerably wider per character than a high-contrast one, so the top of the scale sits lower than it would for a lighter face — 64px of Black occupies roughly the space 78px of SemiBold would. */ --text-3xs: 0.6875rem; /* 11px — micro labels */ --text-2xs: 0.75rem; /* 12px — captions */ --text-xs: 0.8125rem; /* 13px — eyebrows */ --text-sm: 0.9375rem; /* 15px — small body */ --text-base: 1rem; /* 16px — body */ --text-md: clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem); --text-lg: clamp(1.125rem, 1.04rem + 0.37vw, 1.3125rem); /* lead */ --text-xl: clamp(1.25rem, 1.14rem + 0.46vw, 1.5rem); /* card title */ --text-2xl: clamp(1.5rem, 1.28rem + 0.93vw, 2.0625rem); /* sub-head */ --text-3xl: clamp(1.875rem, 1.52rem + 1.57vw, 2.8125rem); /* section */ --text-4xl: clamp(2.25rem, 1.67rem + 2.59vw, 3.8125rem); /* hero */ /* Weights. Alan Sans is variable 300–900; Fraunces 100–900. */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* Fraunces is set Black throughout the brand — see the optical size note. */ --weight-display: var(--weight-black); /* Line height. Black needs a touch more room than a lighter cut — the bowls are heavy enough that tight leading reads as clogged. */ --leading-tight: 1.1; /* display */ --leading-snug: 1.22; /* sub-heads */ --leading-normal: 1.45; /* lead */ --leading-relaxed: 1.65; /* body */ /* Tracking. Black at a low optical size has sturdy, wide forms, so it needs less negative tracking than a high-contrast cut would. */ --tracking-tight: -0.015em; /* large Fraunces */ --tracking-snug: -0.008em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-widest: 0.16em; /* uppercase labels */ /* Fraunces optical size. Every Fraunces setting in the style guide — all 27 pages, headings and the specimen alike — is Fraunces 9pt Black. The 9pt optical cut is the sturdy, low-contrast end of the axis: warm and solid rather than delicate. Used at display sizes it gives the brand its weight, and it is what "Warmth & Authenticity" on p.15 is actually set in. Pinning this deliberately matters — left alone the browser would pick an optical size from the font size and render hero type thin and fashion-like, which is not this brand. The axis stays available if a role ever needs it. */ --opsz-display: 9; --opsz-heading: 9; /* --------------------------------------------------------------------------- 4. SPACE — 4px base --------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* Section rhythm */ --section-y: clamp(4rem, 2.5rem + 6.5vw, 8rem); --section-y-lg: clamp(5rem, 2.9rem + 9.0vw, 10rem); /* --------------------------------------------------------------------------- 5. LAYOUT --------------------------------------------------------------------------- */ --container: 1240px; --container-narrow: 760px; --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3.5rem); /* --------------------------------------------------------------------------- 6. RADIUS — soft, echoing the flowing forms of the wordmark --------------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px; /* --------------------------------------------------------------------------- 7. ELEVATION — tinted with Ble Aswar, never neutral grey --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(16, 38, 58, 0.06), 0 4px 12px rgba(16, 38, 58, 0.05); --shadow-md: 0 2px 4px rgba(16, 38, 58, 0.05), 0 12px 28px rgba(16, 38, 58, 0.09); --shadow-lg: 0 4px 8px rgba(16, 38, 58, 0.05), 0 24px 56px rgba(16, 38, 58, 0.14); /* --------------------------------------------------------------------------- 8. MOTION — unhurried, matching the brand's ease rather than urgency --------------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 160ms; --duration-base: 280ms; --duration-slow: 560ms; } /* ============================================================================= SECTION THEMES The guide's pairing rule: one background + one text colour + one optional accent. Each class below is a legal pairing. Put it on a
and every component inside inherits the correct colours. Each theme applies `color` itself. Redefining --text-primary alone is not enough: descendants inherit the *computed* colour from their ancestor, so without this the text keeps whatever colour resolved. ============================================================================= */ .theme-cream, .theme-foam, .theme-white, .theme-sand, .theme-blush, .theme-rain, .theme-mist, .theme-navy, .theme-volcanic, .theme-basalt, .theme-ocean, .theme-ocean-display, .theme-lagoon, .theme-bougainvillea, .theme-media { color: var(--text-primary); } /* --- Light bases ---------------------------------------------------------- */ .theme-cream { --surface-page: var(--tb-krem-vakwa); } .theme-foam { --surface-page: var(--tb-blan-lekim-vag); } .theme-white { --surface-page: var(--tb-blan-blan); } /* The four deeper neutrals need the darker link shade to hold 4.5:1. #0070A8 only reaches 4.13–4.37 against these. */ .theme-sand, .theme-blush, .theme-rain, .theme-mist { --text-link: var(--tb-ble-losean-deeper); --text-link-hover: var(--tb-ble-aswar); --text-eyebrow: var(--tb-ble-losean-deeper); } .theme-sand { --surface-page: var(--tb-disab-moris); } .theme-blush { --surface-page: var(--tb-roz-koray); } .theme-rain { --surface-page: var(--tb-gri-la-pli); } .theme-mist { --surface-page: var(--tb-gris-ros); } /* --- Dark bases ----------------------------------------------------------- */ .theme-navy, .theme-volcanic, .theme-basalt { --text-primary: var(--text-on-inverse); --text-secondary: var(--text-on-inverse-secondary); --text-muted: #94A2B0; --text-link: var(--tb-lagon-moris); --text-link-hover: var(--tb-lagon-moris-75); --surface-raised: rgba(255, 255, 255, 0.05); --border-subtle: var(--border-on-inverse); --border-strong: rgba(247, 250, 233, 0.28); --focus-ring: var(--focus-ring-inverse); --text-eyebrow: var(--tb-lagon-moris); } .theme-navy { --surface-page: var(--tb-ble-aswar); } .theme-volcanic { --surface-page: var(--tb-nwar-volkan); } .theme-basalt { --surface-page: var(--tb-nwar-bazalt); } /* --- Saturated bases ------------------------------------------------------ */ /* Ble Losean base. Ble Losean at full strength carries NO text accessibly: white is 4.10:1 against it and Ble Aswar only 3.76:1. Neither clears AA at body size. So the section fill uses the deepened shade — visually the same blue, 5.41:1 against white. Use .theme-ocean-display for the true brand blue. */ .theme-ocean { --surface-page: var(--tb-ble-losean-deep); --text-primary: var(--tb-blan-blan); --text-secondary: #E0EEF5; /* 4.56:1 */ --text-muted: #BDDAE8; /* 3.70:1 — large text only */ --text-link: var(--tb-blan-blan); --text-link-hover: var(--tb-blan-lekim-vag); --border-subtle: rgba(255, 255, 255, 0.22); --border-strong: rgba(255, 255, 255, 0.42); --focus-ring: var(--tb-blan-blan); --text-eyebrow: var(--tb-blan-blan); } /* True Ble Losean. Display-size text only (≥24px, or ≥18.7px bold). Never put body copy on this. */ .theme-ocean-display { --surface-page: var(--tb-ble-losean); --text-primary: var(--tb-blan-blan); --text-secondary: var(--tb-blan-blan); --text-muted: rgba(255, 255, 255, 0.78); --text-link: var(--tb-blan-blan); --text-link-hover: var(--tb-blan-lekim-vag); --border-subtle: rgba(255, 255, 255, 0.22); --border-strong: rgba(255, 255, 255, 0.42); --focus-ring: var(--tb-blan-blan); --text-eyebrow: var(--tb-blan-blan); } /* Lagon Moris base — dark text only. White fails badly here (1.99:1). */ .theme-lagoon { --surface-page: var(--tb-lagon-moris); --text-primary: var(--tb-nwar-volkan); --text-secondary: #2E3946; --text-muted: #46525F; --text-link: var(--tb-ble-aswar); --text-link-hover: var(--tb-nwar-bazalt); --border-subtle: rgba(16, 38, 58, 0.18); --border-strong: rgba(16, 38, 58, 0.35); --focus-ring: var(--tb-ble-aswar); --text-eyebrow: var(--tb-ble-aswar); } /* Bougainvillea base — the only supporting colour that carries white body text */ .theme-bougainvillea { --surface-page: var(--tb-roz-bougainvillier); --text-primary: var(--tb-blan-blan); --text-secondary: #F2DAE4; /* 5.59:1 */ --text-muted: #E6B6C8; /* 4.17:1 — large text only */ --text-link: var(--tb-blan-blan); --text-link-hover: var(--tb-roz-koray); --border-subtle: rgba(255, 255, 255, 0.22); --border-strong: rgba(255, 255, 255, 0.40); --focus-ring: var(--tb-blan-blan); --text-eyebrow: var(--tb-blan-blan); } /* Media base — a dark photograph behaves as a dark background (guide p.13) */ .theme-media { --text-primary: var(--tb-blan-blan); --text-secondary: rgba(255, 255, 255, 0.88); --text-muted: rgba(255, 255, 255, 0.72); --text-link: var(--tb-lagon-moris); --text-link-hover: var(--tb-lagon-moris-75); --border-subtle: rgba(255, 255, 255, 0.22); --border-strong: rgba(255, 255, 255, 0.40); --focus-ring: var(--tb-blan-blan); --text-eyebrow: var(--tb-lagon-moris); }