/* tokens.css — design system source of truth.
 *
 * Reference these custom properties everywhere; never hardcode a colour,
 * font size, spacing, radius, or motion value.
 *
 * Structure:
 *   - IV2000 foundation ramps + neutrals + feedback = the raw palette.
 *   - Semantic tokens map foundation values to roles (text, bg, accent, border).
 *   - Components should reference semantic tokens; a few legacy marketing
 *     aliases remain for older section CSS until migrated.
 *
 * To rebrand or tune:
 *   1. Edit foundation ramp values in the "Palette" section, OR
 *   2. Re-map the semantic tokens' right-hand sides.
 *   3. Typography: change `--ibv-font-*` here; `@font-face` rules live in
 *      assets/css/fonts.css.
 */

:root {
	/* ---------- Palette: IV2000 brand ramps ---------- */
	/* Source: signed-off IV2000 colour palette (Foundations doc).
	   Ramps run light→dark (100→500). Prefer semantic tokens in components. */

	/* Blue */
	--ibv-color-blue-100: #a0bbc4;
	--ibv-color-blue-200: #7198a7;
	--ibv-color-blue-300: #598798;
	--ibv-color-blue-400: #1e647a;
	--ibv-color-blue-500: #00526a;

	/* Gold */
	--ibv-color-gold-100: #ffe4ac;
	--ibv-color-gold-200: #ffd87e;
	--ibv-color-gold-300: #ffd164;
	--ibv-color-gold-400: #ffc319;
	--ibv-color-gold-500: #ffbd00;

	/* Mint */
	--ibv-color-mint-100: #a5e6d7;
	--ibv-color-mint-200: #6ed9c1;
	--ibv-color-mint-300: #4fd2b7;
	--ibv-color-mint-400: #00c5a3;
	--ibv-color-mint-500: #00be97;

	/* Sage */
	--ibv-color-sage-100: #8ed1cc;
	--ibv-color-sage-200: #4bb9b2;
	--ibv-color-sage-300: #01aea6;
	--ibv-color-sage-400: #00968b;
	--ibv-color-sage-500: #00897e;

	/* Forest Green — three siblings.
	   `forest-green-deep` is not in the original style guide; added because
	   #055353 is the heaviest functional brand colour in the design file
	   (buttons, prices, headings, badges) and no documented value covers
	   that role. Sits as a deeper sibling to the documented pair. */
	--ibv-color-forest-green:       #283a2c;
	--ibv-color-forest-green-light: #2a6b6b;
	--ibv-color-forest-green-deep:  #055353;

	/* Neutrals */
	--ibv-color-white:     #ffffff;
	--ibv-color-off-white: #f9f8f4;
	--ibv-color-black:     #343434;

	/* Web Grey.
	   Style-guide lists 200 and 300 both as #b6b6b6 — typo. 300 corrected to
	   #939292, which gives a sensible ramp step and matches the placeholder
	   text colour used throughout the design file. */
	--ibv-color-web-grey-100: #e9e9e9;
	--ibv-color-web-grey-200: #b6b6b6;
	--ibv-color-web-grey-300: #939292;

	/* Tints — pale opaque variants in the brand families.
	   Stored as discrete opaque values rather than alpha calculations so
	   the colour is stable across contexts and can be eyedropped,
	   swatched, and reused predictably.

	   Several brand families converge to the same perceived colour at
	   low intensities (e.g. Forest Green, Sage, and Blue all collapse to
	   the same teal tint near 10% over a near-white surface). One token
	   per visually-distinct tint, not one per source family. */
	--ibv-color-tint-teal: #e1e8e4;
	--ibv-color-tint-gold: #faf2dc;
	--ibv-color-tint-blue: #ccdadc;

	/* Feedback (per style guide) */
	--ibv-color-info-100:      #e3efff;
	--ibv-color-info-200:      #2c7eec;
	--ibv-color-info-300:      #1452c2;
	--ibv-color-positive-100:  #e5fdef;
	--ibv-color-positive-200:  #28ad60;
	--ibv-color-positive-300:  #1a8b4b;
	--ibv-color-warning-100:   #fff5eb;
	--ibv-color-warning-200:   #f19544;
	--ibv-color-warning-300:   #d97f25;
	--ibv-color-error-100:     #ffe8e8;
	--ibv-color-error-200:     #de3434;
	--ibv-color-error-300:     #b91c1c;

	/* ---------- Semantic colour ---------- */
	/* Components reference these. To rebrand, change the right-hand side. */
	--ibv-color-bg:              var(--ibv-color-off-white);
	--ibv-color-bg-alt:          var(--ibv-color-white);
	--ibv-color-surface:         var(--ibv-color-white);
	--ibv-color-surface-inverse: var(--ibv-color-forest-green-deep);
	--ibv-color-text:            var(--ibv-color-black);
	--ibv-color-text-muted:      var(--ibv-color-web-grey-300);
	--ibv-color-text-on-dark:    var(--ibv-color-off-white);
	/* Composited: #FFFFFF at α0.7 over forest-green-deep #055353. */
	--ibv-color-text-muted-on-dark: #b4cbcb;
	--ibv-color-text-subtle:     var(--ibv-color-web-grey-200);
	--ibv-color-text-inverse:    var(--ibv-color-white);
	--ibv-color-accent:          var(--ibv-color-sage-500);
	--ibv-color-accent-contrast: var(--ibv-color-white);
	/* Faint teal-tinted divider / input border — design-specific; not on any ramp. */
	--ibv-color-border:          #bfc8c8;
	--ibv-color-border-strong:   var(--ibv-color-web-grey-200);
	--ibv-color-link:               var(--ibv-color-forest-green-deep);
	--ibv-color-link-hover:         var(--ibv-color-sage-500);
	--ibv-color-link-hover-on-dark: var(--ibv-color-text-on-dark);
	--ibv-color-focus-ring:         var(--ibv-color-forest-green-deep);

	/* Legacy marketing names — section CSS still references these; map to IV2000 foundation (migrate to semantic tokens in a later pass). */
	--ibv-color-brand-teal:            var(--ibv-color-forest-green-deep);
	--ibv-color-brand-teal-mid:        var(--ibv-color-forest-green-light);
	--ibv-color-brand-panel-green:     var(--ibv-color-forest-green);
	--ibv-color-accent-gold:           var(--ibv-color-gold-500);
	/* Placeholder — verify against Figma brand palette. */
	--ibv-color-accent-red:            #c8102e;

	/* ---------- Typography ---------- */
	/* Fonts are self-hosted and declared in assets/css/fonts.css (enqueued as
	   ibv-fonts). Stack fallbacks cover until files load or if a face fails. */
	--ibv-font-display: "Newsreader", Georgia, "Times New Roman", serif;
	--ibv-font-body:    "Uncut Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--ibv-font-weight-regular:  400;
	--ibv-font-weight-medium:   500;
	--ibv-font-weight-semibold: 600;
	--ibv-font-weight-bold:     700;

	/* Type scale — fluid via clamp(). Tune per project. */
	--ibv-fs-display: clamp(2.5rem, 5vw, 4.5rem);
	--ibv-fs-h1:      clamp(2rem, 4vw, 3.25rem);
	--ibv-fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
	--ibv-fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
	--ibv-fs-h4:      1.125rem;
	--ibv-fs-body:    1rem;
	--ibv-fs-small:   0.875rem;
	--ibv-fs-eyebrow: 0.8125rem;
	/* Auxiliary microcopy only — legal text, business reg, very small badges.
	   Below comfortable reading size; do NOT use for body, metadata, or
	   any text the user needs to engage with. */
	--ibv-fs-micro:   0.625rem; /* 10px */

	--ibv-lh-tight:   1.1;
	--ibv-lh-snug:    1.25;
	--ibv-lh-cozy:    1.4;
	--ibv-lh-normal:  1.5;
	--ibv-lh-relaxed: 1.7;

	/* Slightly negative tracking suits Inter at display sizes; tune for other fonts. */
	--ibv-tracking-tight:   -0.02em;
	--ibv-tracking-normal:  0;
	--ibv-tracking-eyebrow: 0.08em;

	/* ---------- Spacing scale ---------- */
	/* 4px base. Add or remove steps as the design demands. */
	--ibv-space-2xs: 0.25rem; /*  4px */
	--ibv-space-xs:  0.5rem;  /*  8px */
	--ibv-space-sm:  0.75rem; /* 12px */

	--ibv-space-md:  1rem;    /* 16px */
	--ibv-space-lg:  1.5rem;  /* 24px */
	--ibv-space-xl:  2rem;    /* 32px */
	--ibv-space-2xl: 3rem;    /* 48px */
	--ibv-space-3xl: 4.5rem;  /* 72px */
	--ibv-space-4xl: 6rem;    /* 96px */
	--ibv-space-5xl: 8rem;    /*128px */

	/* Tick pills — one set of spacing knobs shared by .ibv-amenity-ticks
	   (gold ✓ chips) and .ibv-distance-ticks (mint map-pin pills), so a
	   tweak here moves both in step. */
	--ibv-tick-pills-gap:    var(--ibv-space-xs);  /* pill ↔ pill */
	--ibv-tick-pill-gap:     var(--ibv-space-2xs); /* glyph ↔ text inside a pill */
	--ibv-tick-pill-padding: var(--ibv-space-2xs) var(--ibv-space-sm);

	/* ---------- Layout ---------- */
	--ibv-container-max:    72rem;  /* 1152px */
	--ibv-container-narrow: 44rem;  /*  704px */
	--ibv-container-pad-x:  var(--ibv-space-lg);
	--ibv-section-pad-y:    var(--ibv-space-3xl); /* 72px — standard section rhythm */
	--ibv-section-pad-y-sm: var(--ibv-space-2xl); /* 48px — tighter rhythm for chrome-ish bands (trust-strip etc) */
	--ibv-grid-gutter:      var(--ibv-space-lg);
	--ibv-sticky-offset:    var(--ibv-space-md);

	/* ---------- Radius ---------- */
	--ibv-radius-sm:    0.125rem;
	--ibv-radius-md:    0.25rem;
	--ibv-radius-lg:    0.5rem;
	--ibv-radius-field: var(--ibv-radius-lg); /* 8px — multi-field inputs + newsletter pill outer/submit */
	--ibv-radius-pill:  999px;
	--ibv-radius-image: 0;

	/* ---------- Motion ---------- */
	--ibv-duration-fast:   120ms;
	--ibv-duration-normal: 220ms;
	--ibv-duration-slow:   400ms;
	--ibv-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
	--ibv-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

	/* ---------- Elevation ---------- */
	/* Shadows stay subtle by default — prefer borders to shadows for separating surfaces. */
	--ibv-shadow-color: 0 0 0;
	--ibv-shadow-sm: 0 1px 2px rgb(var(--ibv-shadow-color) / 0.06);
	--ibv-shadow-md: 0 4px 12px rgb(var(--ibv-shadow-color) / 0.08);

	/* ---------- Breakpoints (reference in @media only) ---------- */
	--ibv-bp-tablet: 48rem;
	--ibv-bp-desktop: 64rem;
}