/* ========================================================================== Travel Hub - Visual Foundation: tokens (Redesign Phase 1A) ONE source for layout, spacing, rhythm, type, radius, elevation, controls and media ratios. Loaded directly after thui/tokens.css, so every THUI component that already reads a --thui-* token is routed through this scale without being edited. Rules: - New CSS reads --th-* tokens. No raw pixel values for space, radius, container, control height or ratio. - Every spacing value is on the 8px rhythm (4px allowed for hairline internals). Anything else needs a written reason next to it. - Breakpoints (min-width, mobile first): 768 tablet, 1024 desktop, 1440 large. Custom properties cannot be read inside @media, so the numbers are repeated here and in layout.css - keep them identical. Presentation only. Nothing here reads or changes a price, a quote, an availability fact or any commerce behaviour. ========================================================================== */ :root { /* --- Spacing scale (8px rhythm) --- */ --th-space-1: 4px; --th-space-2: 8px; --th-space-3: 12px; --th-space-4: 16px; --th-space-5: 20px; --th-space-6: 24px; --th-space-7: 32px; --th-space-8: 40px; --th-space-9: 48px; --th-space-10: 64px; --th-space-11: 80px; --th-space-12: 96px; --th-space-13: 120px; /* --- Page grid --- --th-container is the width of CONTENT. The gutter sits outside it, so a 1440 screen shows 1280 of content with 80px either side, and anything narrower than 1280 + 2 gutters keeps exactly one gutter per side. */ --th-container: 1280px; --th-gutter: 16px; /* 768: 24 1024: 32 1440: 40 */ /* --- Reading measure --- */ --th-measure: 68ch; /* long body copy, ~60-75 chars */ --th-measure-lead: 720px; /* intro / lead paragraph */ --th-measure-overview: 760px; /* tour overview column cap */ /* --- Vertical rhythm: four levels, never interchangeable --- L1 section one major section to the next L2 section-sm related content, hero -> content transition L3 group content groups inside a section L4 stack heading / paragraph / control spacing (below) */ --th-section: 56px; /* 768: 80 1024: 96 */ --th-section-sm: 48px; /* 768: 64 1024: 80 */ --th-group: 32px; /* 768: 40 1024: 48 */ /* --- Typography rhythm (L4) --- */ --th-gap-eyebrow: var(--th-space-3); /* eyebrow -> title 12 */ --th-gap-title: var(--th-space-4); /* title -> lead 16 / 20 */ --th-gap-lead: var(--th-space-7); /* lead -> CTA / controls 32 */ --th-gap-h2: var(--th-space-4); /* H2 -> paragraph 16 */ --th-gap-h3: var(--th-space-3); /* H3 -> body 12 */ --th-gap-p: var(--th-space-4); /* paragraph -> paragraph 16 */ --th-gap-head: var(--th-space-6); /* section head -> grid 24 / 40 */ /* --- Type scale (Cairo) --- Fluid only between fixed end points, so every size is predictable at 375 and at 1440. Body never drops below 16px; micro (13px) is reserved for eyebrows, chips and legal lines. */ --th-font: var(--thui-font-sans); --th-fs-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); /* 36 -> 56 */ --th-fs-h1: clamp(2rem, 1.55rem + 1.9vw, 3rem); /* 32 -> 48 */ --th-fs-h2: clamp(1.625rem, 1.35rem + 1.15vw, 2.25rem); /* 26 -> 36 */ --th-fs-section: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem); /* 22 -> 28, headings inside a page column */ --th-fs-h3: clamp(1.1875rem, 1.13rem + 0.25vw, 1.375rem); /* 19 -> 22 */ --th-fs-h4: 1.125rem; /* 18 */ --th-fs-lead: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); /* 17 -> 19 */ --th-fs-body: 1rem; /* 16 */ --th-fs-small: 0.9375rem; /* 15 */ --th-fs-micro: 0.8125rem; /* 13 */ --th-lh-display: 1.1; --th-lh-heading: 1.2; --th-lh-snug: 1.35; --th-lh-body: 1.6; --th-lh-ui: 1.25; --th-ls-display: -0.02em; --th-ls-heading: -0.01em; --th-ls-eyebrow: 0.08em; --th-fw-body: 400; --th-fw-ui: 600; --th-fw-heading: 700; --th-fw-display: 800; /* --- Radius: four steps, nothing in between --- */ --th-radius-sm: 8px; /* chips, tags, small badges */ --th-radius-control: 10px; /* buttons, inputs, selects */ --th-radius-card: 16px; /* cards, booking panel */ --th-radius-panel: 24px; /* large visual panels, hero media */ --th-radius-pill: 999px; /* --- Borders --- */ --th-border-color: var(--thui-n-200); --th-border-color-strong: var(--thui-n-300); --th-border: 1px solid var(--th-border-color); --th-divider: 1px solid var(--th-border-color); /* --- Elevation: three levels --- */ --th-shadow-card: 0 1px 2px rgba(18, 38, 58, 0.05), 0 8px 24px -16px rgba(18, 38, 58, 0.20); --th-shadow-raised: 0 2px 4px rgba(18, 38, 58, 0.06), 0 16px 40px -20px rgba(18, 38, 58, 0.30); --th-shadow-overlay: 0 24px 64px -24px rgba(18, 38, 58, 0.40); /* --- Controls --- 48px is the floor for anything a finger presses. The large size is the desktop primary CTA; the small size is for dense, non-primary desktop UI only and must never be the only way to complete a task on mobile. */ --th-control-h: 48px; --th-control-h-lg: 52px; --th-control-h-sm: 40px; --th-control-pad-x: var(--th-space-6); /* 24 */ --th-control-fs: var(--th-fs-body); --th-control-fw: 700; --th-control-gap: var(--th-space-3); /* button -> button 12 */ --th-icon-gap: var(--th-space-2); /* icon -> label 8 */ /* --- Grids --- */ --th-grid-gap: var(--th-space-4); /* 768: 20 1024: 24 */ --th-grid-gap-lg: var(--th-space-4); /* 768: 24 1024: 32 */ /* --- Card internals (consumed by the Phase 1C card system) --- */ --th-card-pad: var(--th-space-4); /* 1024: 20 */ --th-card-media-gap: var(--th-space-5); /* image -> content 20 */ --th-card-title-gap: var(--th-space-3); /* title -> metadata 12 */ --th-card-meta-gap: var(--th-space-2); /* metadata rows 8 */ --th-card-foot-gap: var(--th-space-5); /* summary -> price / CTA 20 */ /* --- Media ratios, one per component role --- */ --th-ratio-cinematic: 21 / 9; /* destination hero, desktop */ --th-ratio-hero-mobile: 4 / 3; /* the same hero below 768 */ --th-ratio-gallery: 16 / 10; /* tour gallery lead image */ --th-ratio-card: 4 / 3; /* tour card */ --th-ratio-compact: 3 / 2; /* compact recommendation card */ --th-ratio-square: 1 / 1; /* --- Colour roles (Phase 1B) --- Roles only, all drawn from the existing THUI palette - no new brand colour. The action teal is the darker of the two the site already uses: white on #13A589 is ~3.0:1 and fails AA for a 16px label, white on #0E7A6C is ~5.4:1. */ --th-color-ink: var(--thui-color-ink); /* headings */ --th-color-text: var(--thui-color-text); /* body */ --th-color-muted: var(--thui-color-text-muted); /* secondary text, 5.3:1 on white */ --th-color-canvas: #FAFBFC; /* page background behind cards */ --th-color-surface: #FFFFFF; --th-color-subtle: var(--thui-n-100); /* quiet panels, image fallback */ --th-color-night: var(--thui-deep-navy); /* utility bar, footer */ --th-color-night-text: #C7D4E0; /* 9:1 on night */ --th-color-action: #0E7A6C; --th-color-action-hover: #0A5F54; --th-color-action-soft: #E6F4F1; --th-color-accent: var(--thui-amber); /* highlights, never text on white */ --th-color-accent-ink: #8A5A00; /* amber-family text, 5.6:1 on white */ --th-focus-ring: 0 0 0 2px var(--th-color-surface), 0 0 0 4px var(--th-color-ink); /* --- Chrome --- */ --th-header-h: 64px; /* 1024: 72 */ --th-utility-h: 36px; /* desktop only */ --th-logo-h: 36px; /* 1024: 44 */ /* --- Motion --- */ --th-ease: var(--thui-ease); --th-dur: var(--thui-dur); /* ---------------------------------------------------------------------- THUI routing. Existing components read these names; pointing them at the scale above is what makes the foundation reach them without a per-component edit. - Space aliases keep their CURRENT values (no visual change). - Container, gutter, section rhythm and the radius steps change value on purpose: they are the inconsistencies the audit recorded. ---------------------------------------------------------------------- */ --thui-space-1: var(--th-space-1); /* 4 */ --thui-space-2: var(--th-space-2); /* 8 */ --thui-space-3: var(--th-space-3); /* 12 */ --thui-space-4: var(--th-space-4); /* 16 */ --thui-space-5: var(--th-space-6); /* 24 */ --thui-space-6: var(--th-space-7); /* 32 */ --thui-space-7: var(--th-space-8); /* 40 */ --thui-space-8: var(--th-space-9); /* 48 */ --thui-space-10: var(--th-space-10); /* 64 */ --thui-space-12: var(--th-space-12); /* 96 */ --thui-container: var(--th-container); --thui-container-wide: var(--th-container); --thui-gutter: var(--th-gutter); --thui-section-y: var(--th-section); --thui-section-y-tight: var(--th-section-sm); --thui-radius-sm: var(--th-radius-sm); /* 8 -> 8 */ --thui-radius-md: var(--th-radius-control); /* 12 -> 10 */ --thui-radius-lg: var(--th-radius-card); /* 16 -> 16 */ --thui-radius-xl: var(--th-radius-panel); /* 22 -> 24 */ --thui-radius-full: var(--th-radius-pill); --thui-control-h-sm: var(--th-control-h-sm); /* 40 -> 40 */ --thui-control-h: var(--th-control-h-lg); /* 52 -> 52 */ --thui-control-h-lg: var(--th-control-h-lg); /* 54 -> 52 */ } @media (min-width: 768px) { :root { --th-gutter: 24px; --th-section: 80px; --th-section-sm: 64px; --th-group: 40px; --th-grid-gap: var(--th-space-5); --th-grid-gap-lg: var(--th-space-6); } } @media (min-width: 1024px) { :root { --th-gutter: 32px; --th-section: 96px; --th-section-sm: 80px; --th-group: 48px; --th-gap-title: var(--th-space-5); --th-gap-head: var(--th-space-8); --th-grid-gap: var(--th-space-6); --th-grid-gap-lg: var(--th-space-7); --th-card-pad: var(--th-space-5); --th-header-h: 72px; --th-logo-h: 44px; } } @media (min-width: 1440px) { :root { --th-gutter: 40px; } }