/*
* tokens.css — Design tokens for Out on Excursion
*
* All CSS custom properties live here. Reference these everywhere else.
* Never hard-code colour, type, or spacing values outside this file.
*
* Google Fonts — include this in the of every HTML page:
*
*
*
*
*
* CSS load order: tokens.css → base.css → components.css → layout.css
*/
:root {
/* ── Colours ─────────────────────────────────────────────────────── */
--color-primary: #1B5F7A; /* deep teal — primary brand */
--color-primary-dark: #134659; /* button hover, active */
--color-primary-light: #E8F1F5; /* section backgrounds, hover surfaces */
--color-accent: #E8B33D; /* warm gold — highlights, badges */
--color-accent-dark: #C4922C; /* gold button hover */
--color-text: #1A1A1A; /* near-black — body text, headlines */
--color-text-muted: #4A4A4A; /* secondary text, captions */
--color-text-subtle: #6B7280; /* helper text, placeholders */
--color-bg: #FFFFFF; /* page background */
--color-surface: #F7F8FA; /* form backgrounds, cards */
--color-border: #E5E7EB; /* borders, dividers */
--color-success: #16A34A; /* success messages */
--color-error: #DC2626; /* error messages, invalid field borders */
/* ── Typography ──────────────────────────────────────────────────── */
--font-display: 'Lora', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
/* Fluid type scale using clamp(min, preferred, max) */
--text-display: clamp(2.25rem, 5vw, 3.75rem); /* hero headline */
--text-h1: clamp(1.875rem, 4vw, 2.75rem); /* page titles */
--text-h2: clamp(1.5rem, 3vw, 2rem); /* section headlines */
--text-h3: clamp(1.25rem, 2.5vw, 1.5rem); /* card titles */
--text-lead: clamp(1.125rem, 1.5vw, 1.25rem);/* lead paragraphs */
--text-body: 1rem; /* body text (16px) */
--text-small: 0.875rem; /* helper text, captions */
--text-xs: 0.75rem; /* fine print, legal */
/* Line heights */
--leading-tight: 1.2; /* headlines */
--leading-snug: 1.4; /* subheadings */
--leading-normal: 1.5; /* lead paragraphs */
--leading-relaxed: 1.6; /* body text */
/* ── Spacing ─────────────────────────────────────────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */
/* ── Container widths ────────────────────────────────────────────── */
--container-narrow: 42rem; /* 672px — long-form text pages */
--container-default: 64rem; /* 1024px — most sections */
--container-wide: 80rem; /* 1280px — hero, wide grids */
/* Horizontal container padding */
--container-px-mobile: var(--space-6); /* 24px */
--container-px-desktop: var(--space-8); /* 32px */
/* ── Border radius ───────────────────────────────────────────────── */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-full: 9999px;
/* ── Shadows ─────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
/* ── Transitions ─────────────────────────────────────────────────── */
--transition: all 0.2s ease;
--transition-fast: all 0.15s ease;
}
/* Breakpoints (for reference — use in @media queries directly):
Mobile: default (0px+)
Tablet: @media (min-width: 640px)
Desktop: @media (min-width: 1024px)
Wide: @media (min-width: 1280px)
*/