/* ==========================================================================
TINY TRAVELLERS — DESIGN TOKENS (standalone)
--------------------------------------------------------------------------
Single source of truth. Drop this one file in and the brand fonts + every
token are available — no extra required.
Load order in a project: tokens.css → components.css
Two tiers:
1. Primitives — raw brand values (don't reference these in components)
2. Semantic — role-based aliases (use THESE in components / templates)
Reference viewport for max type sizes: 1920px.
NOTE: the @import below is the zero-config option. For best performance in
production, delete it and load the same fonts via +
in your instead (the @import is render-blocking).
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
:root {
/* ======================================================================
1. PRIMITIVES
====================================================================== */
/* --- Brand palette (from brand guide p.20) --------------------------- */
--c-cream: #fff7e9; /* primary background */
--c-ochre: #6A3E07; /* primary brand / serif headings / logo */
--c-terracotta: #dc7f5a; /* coral — primary CTA / accent sections */
--c-peach: #efaf84; /* soft accent / brand band background */
--c-sage: #a3a482; /* muted green — calm / positive states */
--c-olive: #716739; /* deep olive — "how it works", contrast band */
/* --- Tints & shades (derived, for states & surfaces) ----------------- */
--c-cream-50: #fffdf7; /* near-white card surface */
--c-cream-100: #fdf4e3; /* raised surface on cream */
--c-cream-200: #fceedd8c; /* sunken / hover surface */
--c-cream-300: #ecdcbf; /* hairline borders, dividers */
--c-cream-400: #ddc9a6; /* stronger borders */
--c-ochre-600: #9c631a; /* ochre hover */
--c-ochre-700: #7f5115; /* ochre active */
--c-terracotta-100: #f8e3d7; /* tint — soft fills, focus halo */
--c-terracotta-600: #cd6c45; /* CTA hover */
--c-terracotta-700: #b85d38; /* CTA active */
--c-peach-100: #fceedd; /* peach tint band */
--c-peach-200: #f8ddc2;
--c-sage-100: #eceee1; /* positive pill background */
--c-sage-200: #d9dcc6;
--c-sage-700: #6f7355; /* positive text on sage tint */
--c-olive-700: #5d552f; /* olive hover/active */
/* --- Warm neutrals (ink) -------------------------------------------- */
--c-ink-900: #3a342c; /* primary text / dark buttons */
--c-ink-800: #3a342c; /* strong text */
--c-ink-700: #5a5247; /* secondary text */
--c-ink-500: #70675c; /* muted / meta text */
--c-ink-400: #a89e8e; /* placeholder / disabled text */
--c-white: #ffffff;
/* --- Status (functional) -------------------------------------------- */
--c-positive: #6f8f5f; /* available / in-stock */
--c-positive-bg: #e9efe1;
--c-warning: #c08a2e; /* low stock / notice */
--c-warning-bg: #fbf0d8;
--c-danger: #b4543d; /* error / unavailable emphasis */
--c-danger-bg: #f7e2da;
/* ======================================================================
2. SEMANTIC ALIASES ← use these in components & templates
====================================================================== */
/* --- Surfaces -------------------------------------------------------- */
--surface-base: var(--c-cream); /* page background */
--surface-raised: var(--c-cream-50); /* cards on cream */
--surface-raised-alt: var(--c-white); /* crisp white panels */
--surface-sunken: var(--c-cream-200); /* wells, inactive inputs */
--surface-band-peach: var(--c-peach-100); /* "brands we trust" band */
--surface-band-olive: var(--c-olive); /* "how it works" band */
--surface-band-accent: var(--c-terracotta); /* "ready to travel" band */
--surface-utility-bar: var(--c-ochre); /* availability top bar */
/* --- Text ------------------------------------------------------------ */
--text-primary: var(--c-ink-900);
--text-strong: var(--c-ink-800);
--text-secondary: var(--c-ink-700);
--text-muted: var(--c-ink-500);
--text-placeholder:var(--c-ink-400);
--text-brand: var(--c-ochre); /* serif headings */
--text-accent: var(--c-terracotta); /* eyebrows, emphasis */
--text-on-dark: var(--c-cream); /* text on olive/terracotta */
--text-on-accent: var(--c-white); /* text on CTA */
--text-link: var(--c-ochre);
/* --- Borders & dividers --------------------------------------------- */
--border-subtle: var(--c-cream-300);
--border-default: #f6d8cc;
--border-strong: var(--c-ink-400);
--border-focus: var(--c-terracotta);
/* --- Brand accents (use directly where role-agnostic) --------------- */
--accent-primary: var(--c-terracotta);
--accent-secondary:var(--c-ochre);
--accent-soft: var(--c-peach);
--accent-calm: var(--c-sage);
/* --- Status semantic ------------------------------------------------- */
--status-available-fg: var(--c-positive);
--status-available-bg: var(--c-positive-bg);
--status-low-fg: var(--c-warning);
--status-low-bg: var(--c-warning-bg);
--status-unavailable-fg: var(--c-ink-500);
--status-unavailable-bg: var(--c-cream-200);
/* ======================================================================
3. TYPOGRAPHY
====================================================================== */
--font-display: "Libre Bodoni", Georgia, "Times New Roman", serif; /* H1/H2 */
--font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
/* Weights */
--fw-regular: 400;
--fw-medium: 500; /* CTA / Montserrat Medium, Libre Bodoni Medium */
--fw-semibold: 600;
--fw-bold: 700;
/* Fluid type scale — min (≈mobile) → max (1920 reference).
Comment shows the px range each clamp resolves to. */
--fs-display: clamp(1.875rem, 1.29rem + 1.96vw, 3.125rem); /* 40 → 80 */
--fs-h1: clamp(2.00rem, 1.35rem + 2.10vw, 3.125rem); /* 32 → 50 */
--fs-h2: clamp(1.625rem,1.20rem + 1.40vw, 2.50rem); /* 26 → 40 */
--fs-h3: clamp(1.375rem,1.10rem + 0.90vw, 1.875rem); /* 22 → 30 */
--fs-h4: clamp(1.25rem, 1.10rem + 0.50vw, 1.50rem); /* 20 → 24 */
--fs-h5: clamp(1.125rem,1.05rem + 0.25vw, 1.25rem); /* 18 → 20 */
--fs-body-lg: 1.125rem; /* 18 */
--fs-body: 1rem; /* 16 — base */
--fs-body-sm: 0.875rem; /* 14 */
--fs-caption: 0.8125rem; /* 13 */
--fs-eyebrow: 0.75rem; /* 12 */
--fs-xseyebrow: 0.65rem; /* 11 */
/* Line heights */
--lh-tight: 1.08; /* display */
--lh-snug: 1.18; /* headings */
--lh-heading: 1.28; /* small headings */
--lh-body: 1.6; /* paragraphs */
--lh-relaxed: 1.75; /* long-form / dense lists */
/* Letter spacing */
--ls-tight: -0.01em; /* large serif display */
--ls-normal: 0;
--ls-wide: 0.04em; /* utility labels */
--ls-eyebrow: 0.16em; /* uppercase eyebrows / caps */
/* ======================================================================
4. SPACING SCALE (text-level → section-level)
base unit = 4px. Big steps exist for 1920 section rhythm.
====================================================================== */
--space-3xs: 0.125rem; /* 2px — icon nudge */
--space-2xs: 0.25rem; /* 4px — tight inline gaps */
--space-xs: 0.5rem; /* 8px — chip padding, list gaps */
--space-sm: 0.75rem; /* 12px — input padding, small gaps */
--space-md: 1rem; /* 16px — default element gap */
--space-lg: 1.5rem; /* 24px — card padding, stack gap */
--space-xl: 2rem; /* 32px — card padding (roomy) */
--space-2xl: 3rem; /* 48px — block separation */
--space-3xl: 4rem; /* 64px — sub-section spacing */
--space-4xl: 6rem; /* 96px — section padding (mobile→) */
--space-5xl: 8rem; /* 128px — section padding */
--space-6xl: 10rem; /* 160px — hero / major section */
/* Fluid section padding helper (vertical rhythm that scales) */
--section-py: clamp(var(--space-3xl), 4vw + 3rem, var(--space-5xl));
--gutter: clamp(var(--space-lg), 4vw, var(--space-4xl)); /* page side padding */
--container: 1280px; /* max content width within 1920 frame */
/* ======================================================================
5. BORDER RADIUS (scaled system)
====================================================================== */
--radius-xs: 4px; /* tags, small inputs */
--radius-sm: 8px; /* buttons, inputs */
--radius-md: 12px; /* default cards */
--radius-lg: 16px; /* feature cards, image frames */
--radius-xl: 24px; /* large panels, hero media */
--radius-2xl: 32px; /* oversized panels */
--radius-pill: 999px; /* pills, toggles, badges */
--radius-round: 50%; /* avatars, icon circles, logo mark */
/* ======================================================================
6. ELEVATION (soft, warm-tinted — never hard grey)
====================================================================== */
--shadow-xs: 0 8px 24px rgb(177 113 31 / 5%);
--shadow-sm: 0 2px 8px rgba(43, 38, 32, 0.06);
--shadow-md: 0 8px 24px rgba(43, 38, 32, 0.08);
--shadow-lg: 0 16px 40px rgba(43, 38, 32, 0.10);
--shadow-focus: 0 0 0 3px var(--c-terracotta-100);
/* ======================================================================
7. MOTION
====================================================================== */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 400ms;
/* ======================================================================
8. Z-INDEX
====================================================================== */
--z-base: 1;
--z-sticky: 100; /* sticky booking widget / nav */
--z-overlay: 500; /* date picker, dropdowns */
--z-modal: 1000; /* cart drawer, checkout */
--z-toast: 1500;
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}