/* ============================================================================
   OPEN HORIZON — by Montero Private Safaris
   tokens.css — the single source of truth for colour, type, space and motion.

   VISUAL DIRECTION
   Modelled closely on altezzatravel.com: a white page, a thin utility bar
   above a white header with centred uppercase navigation, full-bleed hero
   photography with a floating white booking card, centred section headings
   each underlined by a short gold rule, photo-led cards with the title set
   over the image, deep navy feature cards, grass-green pill buttons and soft
   low shadows.

   COLOUR
   Light throughout. Navy appears only where the reference uses it — the
   feature cards and the footer — as a punctuation colour on a white page,
   never as the page itself.

   Greens and golds are chosen to sit where the reference's do while actually
   passing contrast: the reference's own #77B017 scores about 2.5:1 against
   white, so it is kept here strictly as a decorative/graphic tone and a
   deeper green carries all text and buttons. Every pairing below is asserted
   by tools/contrast-check.py.
   ========================================================================= */

:root {
  /* ---- Raw brand tones (not used directly by components) ---------------- */
  --green-900: #1f3d13;
  --green-700: #3f7d23; /* text + buttons — 5.4:1 on white */
  --green-500: #5c9e34;
  --green-400: #77b017; /* DECORATIVE ONLY — fails text contrast on white  */
  --gold-700: #7a6136;  /* gold text — 6.3:1 on white                      */
  --gold-500: #b08b44;
  --gold-300: #c7b184;  /* the short rule under a heading — decorative     */
  --navy-900: #0c2f4a;  /* feature cards, footer                           */
  --navy-800: #123a59;
  --navy-700: #1b4b6e;
  --sand-100: #f3efe7;
  --ink-900: #141414;

  /* ---- Semantic surfaces ------------------------------------------------ */
  --surface-0: #ffffff; /* page                      */
  --surface-1: #ffffff; /* card                      */
  --surface-2: #f7f6f3; /* alternating section band  */
  --surface-3: #efece6; /* input, chip, inactive tab */
  --surface-bar: #fafafa; /* the thin utility bar    */
  --surface-sunk: var(--navy-900); /* footer         */

  /* ---- Text ------------------------------------------------------------- */
  --text-1: #141414; /* 18.1:1 on white */
  --text-2: #4a4a4a; /*  8.9:1 on white */
  --text-3: #646464; /*  5.9:1 on white */
  --on-dark-1: #ffffff;
  --on-dark-2: #c6d2dc; /* secondary text on navy */

  /* ---- Accents ---------------------------------------------------------- */
  --accent: var(--green-700);
  --accent-quiet: var(--green-900);
  --accent-bright: var(--green-400); /* graphics only, never text on white */
  --accent-glow: rgb(63 125 35 / 14%);
  --on-accent: #ffffff;

  --gold: var(--gold-700);
  --rule: var(--gold-300);
  --star: #b8860b; /* review stars */

  --line: #e6e3dc;        /* decorative separators    */
  --line-strong: #8a8578; /* control borders — 3:1 vs white (WCAG 1.4.11) */
  --line-hair: rgb(20 20 20 / 9%);

  --success: #2b7349;
  --danger: #b3261e;
  --focus: #1f3d13;

  --glass: rgb(255 255 255 / 92%);
  --glass-line: rgb(20 20 20 / 9%);

  /* Soft, low, cool-grey shadows — the reference signature. */
  --shadow-1: 0 1px 5px rgb(159 167 177 / 24%);
  --shadow-2: 0 2px 10px rgb(159 167 177 / 26%), 0 1px 3px rgb(159 167 177 / 18%);
  --shadow-3: 0 10px 34px rgb(120 128 138 / 22%), 0 2px 8px rgb(159 167 177 / 16%);
  --shadow-card: 0 14px 44px rgb(20 30 40 / 16%);
  --shadow-glow: 0 6px 22px rgb(63 125 35 / 20%);

  /* ---- Spectrum ----------------------------------------------------------
     A six-stop pride spectrum, muted to sit inside this palette and anchored
     on the brand green at stop 3. Used for hairlines and progress only —
     never as a text or icon colour, and never as the only carrier of meaning. */
  --sp-1: #c2502c;
  --sp-2: #d4932f;
  --sp-3: #5c9e34;
  --sp-4: #2f8f84;
  --sp-5: #41619e;
  --sp-6: #7a4f96;
  --spectrum: linear-gradient(
    90deg,
    var(--sp-1) 0%, var(--sp-2) 20%, var(--sp-3) 40%,
    var(--sp-4) 60%, var(--sp-5) 80%, var(--sp-6) 100%
  );
}

/* ---- Typography ---------------------------------------------------------
   Sans throughout, as on the reference, which pairs a geometric display face
   with a neutral text face. Manrope covers both roles here: heavy weights for
   headings, regular for body. It is a Montero brand face already, SIL OFL
   1.1, self-hosted and subset to latin, so the page renders identically
   offline and sets no third-party cookies.

   The @font-face rules live in the generated fonts.css, which embeds the file
   as a data URI — see tools/gen-fonts.py for why. */
:root {
  --font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: var(--font-ui);

  --t-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
  --t-sm: clamp(0.85rem, 0.83rem + 0.10vw, 0.92rem);
  --t-base: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --t-md: clamp(1.08rem, 1.03rem + 0.22vw, 1.22rem);
  --t-lg: clamp(1.2rem, 1.12rem + 0.38vw, 1.5rem);
  --t-xl: clamp(1.45rem, 1.28rem + 0.78vw, 2rem);
  --t-2xl: clamp(1.75rem, 1.48rem + 1.3vw, 2.6rem);
  --t-3xl: clamp(2.1rem, 1.70rem + 1.95vw, 3.4rem);
  --t-4xl: clamp(2.5rem, 1.85rem + 3.1vw, 4.4rem);

  --lh-tight: 1.14;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-loose: 1.72;

  --track-wide: 0.06em;
  --track-wider: 0.12em;
  --track-widest: 0.2em;

  --w-head: 750;  /* headings            */
  --w-nav: 700;   /* nav + buttons       */
}

/* ---- Space -------------------------------------------------------------- */
:root {
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-s: 1rem;
  --sp-m: 1.35rem;
  --sp-l: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4.25rem;
  --sp-3xl: 6rem;
  --sp-4xl: 8rem;

  --section-y: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  --gutter: clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
  /* THE READING COLUMN. Not in `ch`, which looks like the right unit and
     is the wrong one: `ch` resolves against each element's OWN font size,
     so a 26px heading, a 17px paragraph and a 13px caption set to the same
     `68ch` come out 1196px, 705px and 531px wide. Centred, that is three
     different left edges in one column — which is exactly how the article
     pages looked. A fixed length gives every element in a column the same
     edge, and still scales with the reader's browser font size because it
     is rem. 44rem is the same 68 characters the body text had. */
  --measure: 44rem;
  --measure-tight: 35rem;
  --maxw: 1240px;
  --maxw-text: 860px;

  --r-xs: 4px;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-xl: 22px;
  --r-pill: 50px;

  /* Keyboard focus must never be hidden behind the sticky header
     (WCAG 2.2 — Focus Not Obscured). */
  --bar-h: 38px;
  --header-h: 74px;
}

/* ---- Motion -------------------------------------------------------------
   Durations are context-scaled, not one global number. --mo is a global
   multiplier the Access Dock sets to ~0 to stop all motion at the source. */
:root {
  --mo: 1;

  --d-instant: calc(90ms * var(--mo));
  --d-fast: calc(180ms * var(--mo));
  --d-base: calc(300ms * var(--mo));
  --d-slow: calc(560ms * var(--mo));
  --d-scene: calc(950ms * var(--mo));
  --d-epic: calc(1600ms * var(--mo));

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --mo: 0.001; }
}
:root[data-motion='off'] { --mo: 0.001; }

/* ---- Z-index ladder ----------------------------------------------------- */
:root {
  --z-grain: 1;
  --z-raise: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-toolbar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-cursor: 900;
  --z-preloader: 1000;
  --z-skip: 1100;
}