/* ==========================================================================
   Ovation — design tokens
   The single source of truth for colour, type, spacing and the layout grid.
   Nothing in this file selects anything; it only declares custom properties.
   ========================================================================== */

:root {
	/* ----------------------------------------------------------------------
	   Brand palette
	   Sampled from the Figma redesign. Names describe the role, not the hue,
	   so a future rebrand is a value swap rather than a find-and-replace.
	   ---------------------------------------------------------------------- */
	--o-navy: #1d305b;          /* Header bar, footer link area, dark sections */
	--o-navy-deep: #152957;     /* Newsletter bar — one step darker than navy  */
	--o-navy-ink: #0f1f40;      /* Deepest navy, for overlays and hovers       */
	--o-orange: #f89728;        /* Primary accent: buttons, eyebrows, logo arc */
	--o-orange-dark: #dd7f13;   /* Accent hover                                */
	--o-orange-alt: #e9810a;    /* Second tone in an alternating band          */
	--o-gold: #f5be34;          /* Text links on navy — too light for white    */
	--o-teal: #0e5d79;          /* Secondary accent (weather / utility chips)  */
	--o-aqua: #5ec4b9;          /* The wave pattern on light fields            */
	--o-red: #d4443e;           /* Third accent: icon tiles, the save chip     */
	--o-ice: #f0fafd;           /* Pale blue "foam" section background         */
	--o-mist: #a6b2cc;          /* Muted text on navy                          */
	--o-white: #ffffff;
	--o-cream: #f7f5f1;         /* Light section background                    */
	--o-sand: #e8e2d9;          /* Hairlines and dividers on light             */
	--o-rule-cool: #dbe3eb;     /* Cooler hairline, for the listing detail     */
	--o-ink: #1a2338;           /* Body copy on light                          */
	--o-ink-soft: #55607a;      /* Secondary copy on light                     */
	--o-ink-mist: #738094;      /* Muted copy on the pale blue field           */
	--o-warn-bg: #fff8ee;       /* Editor-only notices                         */

	/* Semantic aliases — prefer these in component CSS. */
	--o-bg: var(--o-white);
	--o-bg-dark: var(--o-navy);
	--o-text: var(--o-ink);
	--o-text-soft: var(--o-ink-soft);
	--o-accent: var(--o-orange);
	--o-accent-contrast: var(--o-white);
	--o-rule: var(--o-sand);
	--o-rule-on-dark: rgba(255, 255, 255, 0.18);
	--o-focus: var(--o-orange);

	/* ----------------------------------------------------------------------
	   Typography
	   Inter carries the uppercase, letter-spaced UI voice (nav, eyebrows,
	   buttons). Montserrat carries running copy.
	   ---------------------------------------------------------------------- */
	--o-font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--o-font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--o-font-display: var(--o-font-ui);

	--o-fw-regular: 400;
	--o-fw-medium: 500;
	--o-fw-semibold: 600;
	--o-fw-bold: 700;

	/* Fluid display scale: min at 375px, max at 1440px. */
	--o-fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);   /* 36 → 56 */
	--o-fs-h1: clamp(2rem, 1.3rem + 3vw, 3rem);               /* 32 → 48 */
	--o-fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);      /* 28 → 44 */
	--o-fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);     /* 22 → 30 */
	--o-fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);       /* 18 → 22 */

	--o-fs-body: 1rem;          /* 16 */
	--o-fs-body-lg: 1.125rem;   /* 18 */
	--o-fs-small: 0.875rem;     /* 14 */
	--o-fs-xs: 0.75rem;         /* 12 */

	--o-lh-tight: 1.15;
	--o-lh-heading: 1.2;
	--o-lh-body: 1.5;
	--o-lh-loose: 1.7;

	/* Uppercase label voice — used by nav, eyebrows, buttons, footer headings. */
	--o-label-size: 1.125rem;       /* 18px, per the header nav in Figma */
	--o-label-tracking: 0.114em;    /* 2.05px at 18px */
	--o-label-tracking-tight: 0.06em;
	--o-label-weight: var(--o-fw-medium);

	/* ----------------------------------------------------------------------
	   Layout grid
	   Content maxes out at 1440. The gutter is a true 5% of the viewport,
	   floored at 20px on phones and capped at 96px so ultrawide screens do
	   not push content into a narrow ribbon.
	   At 1920 the maths lands on exactly 1440 of content with 240 either side.
	   ---------------------------------------------------------------------- */
	--o-container: 1440px;
	--o-container-narrow: 1100px;
	--o-container-text: 760px;   /* Comfortable measure for long-form copy */
	--o-gutter: clamp(20px, 5vw, 96px);

	/* ----------------------------------------------------------------------
	   Spacing scale (4px base)
	   ---------------------------------------------------------------------- */
	--o-space-2xs: 0.25rem;   /* 4  */
	--o-space-xs: 0.5rem;     /* 8  */
	--o-space-sm: 0.875rem;   /* 14 */
	--o-space-md: 1.25rem;    /* 20 */
	--o-space-lg: 2rem;       /* 32 */
	--o-space-xl: 3rem;       /* 48 */
	--o-space-2xl: 3.5rem;    /* 56 */
	--o-space-3xl: 5rem;      /* 80 */

	/* Vertical rhythm between full sections — fluid, matched to the comps. */
	--o-section-y: clamp(3.5rem, 2rem + 5vw, 7.5rem);   /* 56 → 120 */

	/* ----------------------------------------------------------------------
	   Chrome
	   ---------------------------------------------------------------------- */
	--o-header-height: 104px;
	--o-header-height-compact: 72px;
	--o-header-bg: var(--o-navy);
	--o-header-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
	--o-logo-height: 68px;
	--o-logo-height-compact: 42px;

	/* ----------------------------------------------------------------------
	   Effects
	   ---------------------------------------------------------------------- */
	--o-radius-sm: 2px;
	--o-radius-md: 4px;
	--o-radius-pill: 999px;
	--o-shadow-card: 0 12px 32px rgba(15, 31, 64, 0.1);
	--o-shadow-float: 0 2px 10px rgba(0, 0, 0, 0.18);   /* Circular controls over a photograph */
	--o-shadow-modal: 0 32px 80px rgba(15, 31, 64, 0.35);
	--o-scrim: rgba(15, 31, 64, 0.55);                  /* Behind a modal, over the blurred page */
	--o-scrim-light: rgba(0, 0, 0, 0.25);               /* Over a video cover, under its play button */
	--o-pattern-tile: 800px;   /* One repeat of the wave pattern - the comp's scale */
	--o-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--o-transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ----------------------------------------------------------------------
	   Stacking order — declared in one place so layers never fight.
	   ---------------------------------------------------------------------- */
	--o-z-header: 100;
	--o-z-search: 110;
	--o-z-drawer: 120;
	--o-z-modal: 150;
	--o-z-skiplink: 200;
}

/* --------------------------------------------------------------------------
   Colour schemes
   Applied by the Elementor "Colour scheme" control and by the header/footer.
   A scheme only remaps the semantic aliases; components never hard-code hex.
   -------------------------------------------------------------------------- */
.o-scheme-dark {
	--o-bg: var(--o-navy);
	--o-text: var(--o-white);
	--o-text-soft: var(--o-mist);
	--o-rule: var(--o-rule-on-dark);
	background-color: var(--o-bg);
	color: var(--o-text);
}

.o-scheme-light {
	--o-bg: var(--o-white);
	--o-text: var(--o-ink);
	--o-text-soft: var(--o-ink-soft);
	--o-rule: var(--o-sand);
	background-color: var(--o-bg);
	color: var(--o-text);
}

/*
 * The pale-blue "foam" field. Copy on this surface is navy rather than near-
 * black, which is what the comps use wherever this background appears.
 */
.o-scheme-ice {
	--o-bg: var(--o-ice);
	--o-text: var(--o-navy);
	--o-text-soft: var(--o-navy);
	--o-rule: rgba(29, 48, 91, 0.15);
	background-color: var(--o-bg);
	color: var(--o-text);
}

/*
 * The orange band. Used by the bottom CTA and anywhere else a section needs to
 * shout. The accent has to move off orange here or it disappears, so on this
 * surface "accent" means white and its contrast colour is navy - which is what
 * the comps draw on the orange bands.
 */
.o-scheme-orange {
	--o-bg: var(--o-orange);
	--o-text: var(--o-white);
	--o-text-soft: var(--o-white);
	--o-accent: var(--o-white);
	--o-accent-contrast: var(--o-navy);
	--o-rule: rgba(255, 255, 255, 0.28);
	background-color: var(--o-bg);
	color: var(--o-text);
}