/* ==========================================================================
   BYB Global — tokens.css
   The single source for every design token on the site. Loaded FIRST, before
   components.css / base.css / page CSS, so everything downstream can use these.

   Values mirror design.md §3. Do not add a colour, font, radius or shadow to a
   page stylesheet — add it here, or use an existing token.
   ========================================================================== */

/* ---------- Self-hosted fonts (B13) ---------------------------------------
   Both files are Google's own variable-font builds (latin subset) — each one
   file covers all the weights this site uses; the browser instances the
   requested weight out of it, exactly as Google's own CSS does. Self-hosted
   so there's no cross-origin connection or render-blocking third-party CSS
   on the critical path (F16). font-display:swap avoids a blocked first paint;
   the two above-the-fold faces (Outfit 400, Cormorant 300) are preloaded from
   functions.php. */
@font-face {
	font-family:'Cormorant Garamond';
	font-style:normal;
	font-weight:300 600;
	font-display:swap;
	src:url('../fonts/cormorant-garamond-variable.woff2') format('woff2');
}
@font-face {
	font-family:'Outfit';
	font-style:normal;
	font-weight:400 600;
	font-display:swap;
	src:url('../fonts/outfit-variable.woff2') format('woff2');
}

:root {
	/* ---------- Colour ---------- */
	--gold:#b7a26a;                        /* primary accent, buttons          */
	--gold-dark:#a29061;                   /* hover / deeper accent            */
	--gold-light:#d6c382;                  /* light accent, on-dark eyebrows   */
	--black:#000;
	--ink:#0b0b0d;                         /* near-black text / blocks         */
	--paper:#f7f7f7;                       /* off-white section background     */
	--text:#1a1a1a;
	--muted:#6b6b6b;                       /* secondary text                   */
	--hairline:rgba(183,162,106,0.22);     /* gold hairline borders + grids    */
	--line-2:#e7e3d8;                      /* solid light border (forms/cards) */
	--line-dark:rgba(255,255,255,0.10);    /* hairline on dark sections        */
	--foot-bg:#1e1e1e;
	--ink-2:#17140f;                       /* mid-tone in the dark gradient    */

	/* Reusable dark gold-gradient for premium dark sections (design.md §3).
	   Existing sections vary the radial highlight position on purpose, so they
	   compose their own; use this token for new dark sections. */
	--grad-dark-gold:
		radial-gradient(ellipse 60% 80% at 82% 16%, rgba(183,162,106,0.16), transparent 55%),
		linear-gradient(160deg, #0b0b0d 0%, #17140f 58%, #0b0b0d 100%);
	/* NO blue anywhere — a blue direction was explicitly rejected (design.md). */

	/* ---------- Type ---------- */
	--serif:"Cormorant Garamond",Georgia,serif;                                  /* ALL headings  */
	--sans:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;        /* ALL body/UI   */
	--fs-base:15px;
	--lh-base:1.6;
	--fs-hero:clamp(46px,6.8vw,82px);      /* homepage hero                    */
	--fs-hero-sm:clamp(38px,5.2vw,58px);   /* country/interior hero            */
	--fs-h2:clamp(30px,4.2vw,46px);        /* section heading                  */
	--fs-eyebrow:11px;
	--ls-eyebrow:0.2em;

	/* ---------- Radius ----------
	   Sharp 90° corners are the design DNA for cards, chips and tables.
	   BUTTONS ARE THE ONE EXCEPTION: every button on the site is curved at
	   12px (client instruction, 2026-09-15). See design.md §2 rule 1. */
	--btn-radius:12px;                     /* every button/CTA, site-wide      */
	--card-radius:0;                       /* cards, chips, tables stay sharp  */
	--input-radius:12px;                   /* text inputs, textareas, selects  */
	/* Rule of thumb: interactive controls are curved, structural containers
	   (cards, chips, tables, panels) stay sharp. Checkboxes and radios keep
	   their native shape — they are not text controls. */

	/* ---------- Layout ---------- */
	--container:1240px;
	--container-pad:48px;
	--container-pad-mobile:24px;
	--sec-py:96px;
	--sec-py-tight:64px;
	--sec-py-mobile:56px;

	/* ---------- Motion ---------- */
	--t-fast:.2s ease;
	--t-base:.25s ease;
	--t-spring:.25s cubic-bezier(.4,0,.2,1);

	/* ---------- Depth (used sparingly — depth comes from borders, not shadows) */
	--shadow-btn:0 16px 34px -18px rgba(0,0,0,0.6);

	/* ---------- Z-index ---------- */
	--z-header:1000;
	--z-mega:1001;
	--z-widget:1500;
	--z-skip:2000;
}

/* Phones: sections that use the desktop rhythm (var(--sec-py)) step down to
   the mobile one, so a page doesn't stack 96px gaps above and below every band. */
@media (max-width: 720px) {
	:root { --sec-py:var(--sec-py-mobile); --sec-py-tight:48px; }
}