/* ==========================================================================
   OÁZA LAHOVIČKY — design tokens

   Built on the Rhye theme token architecture (fluid type scale, distance
   scale, gutter system), retuned for a bright private leisure venue:
   warm ivory ground, deep forest ink, pool-aqua accent.

   Rhye reference: rhye/css/main.css :root (lines 310–412)

   Two colour contexts exist, and keeping them apart is what lets a light
   page carry full-bleed photography:

     page   — ivory ground, forest ink            (--c-ground / --c-ink)
     media  — type laid over a photograph          (--c-on-media / --scrim)

   Nothing else in the stylesheet hardcodes a colour; a re-tune happens here.
   ========================================================================== */

:root {
  /* ---- type families -------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Cormorant Garamond", "Times New Roman", serif;

  /* ---- palette: the page ---------------------------------------------- */
  /* warm ivory, the colour of the venue's own sunlit stone and larch */
  --c-ground: #f7f3ea;
  --c-surface-1: #f1ece0;   /* raised panels, cards */
  --c-surface-2: #ebe4d5;   /* pressed / hovered surfaces */
  --c-surface-3: #e3dbc9;   /* image placeholders before load */
  --c-surface-4: #d9cfb9;

  /* deep forest — the venue's planting and larch cladding in shade */
  --c-ink: #1f2f27;         /* headings, primary type */
  --c-ink-2: #414d44;       /* body copy — 8.6:1 on the ivory ground */
  --c-muted: #6b7a6f;       /* secondary copy — 4.7:1, clears AA */
  --c-faint: #7a8880;       /* hints and notes — 4.5:1, clears AA */

  --c-line: rgba(31, 47, 39, 0.18);
  --c-line-soft: rgba(31, 47, 39, 0.09);

  /* single restrained accent, taken from the pool itself */
  --c-accent: #2b7f8c;
  --c-accent-deep: #1f606b;   /* the accent's pressed / hovered shade */
  --c-accent-soft: rgba(43, 127, 140, 0.11);

  /* ---- palette: type over photography ---------------------------------- */
  --c-on-media: #fbf8f1;
  --c-on-media-2: rgba(251, 248, 241, 0.84);
  --c-on-media-line: rgba(251, 248, 241, 0.28);
  /* the scrim is deep forest rather than black: it keeps the greens and the
     pool blue in the photography instead of draining them to grey */
  --scrim: 20, 34, 27;

  --c-bg: var(--c-ground);
  --c-text: var(--c-ink-2);
  --c-heading: var(--c-ink);

  /* ---- fluid type scale (Rhye min/max px model) ------------------------ */
  /* Softened against the previous build: the ceilings on the display sizes
     come down by roughly a third. The venue sells calm, and 240px display
     type in a viewport shouts. */
  --fs-min-vw: 360;
  --fs-max-vw: 1600;

  --xxl-min: 48;  --xxl-max: 150;
  --xl-min:  36;  --xl-max: 96;
  --h1-min:  32;  --h1-max: 66;
  --h2-min:  26;  --h2-max: 46;
  --h3-min:  21;  --h3-max: 34;
  --h4-min:  18;  --h4-max: 23;
  --h5-min:  16;  --h5-max: 18;
  --p-min:   15;  --p-max: 17;
  --sub-min: 10;  --sub-max: 12;

  /* ---- rhythm --------------------------------------------------------- */
  /* These are the padding a section pays on ONE side. main.css collapses the
     top padding of any section that follows another, so the gap between two
     sections is one of these values and not two — without that, --d-lg alone
     opened 400px of empty ivory between every pair on a wide screen. */
  --d-xs: clamp(28px, 3.4vw, 46px);
  --d-sm: clamp(40px, 5vw, 76px);
  --d-md: clamp(60px, 7vw, 116px);
  --d-lg: clamp(76px, 8.6vw, 140px);
  --d-xl: clamp(110px, 14vw, 220px);

  --gutter-h: 120px;
  --gutter-v: 80px;
  --header-h: 88px;

  /* ---- motion (Rhye easing vocabulary, slowed) ------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* power4.out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* power3.inOut */
  /* every duration is ~30% longer than the previous build: the same
     choreography, walked rather than cut */
  --dur-fast: 0.5s;
  --dur-base: 1s;
  --dur-slow: 1.6s;

  --z-curtain: 900;
  --z-header: 860;
  --z-menu: 850;
  --z-cursor: 10000;
  --z-lightbox: 950;
}

@media (max-width: 1400px) { :root { --gutter-h: 80px; --gutter-v: 64px; } }
@media (max-width: 1024px) { :root { --gutter-h: 48px; --gutter-v: 48px; --header-h: 72px; } }
@media (max-width: 720px)  { :root { --gutter-h: 22px; --gutter-v: 32px; --header-h: 64px; } }

/* fluid size helper: linear interpolation between min/max across viewport */
.fluid { font-size: var(--_fs); }

/* ---- type roles ------------------------------------------------------- */
.t-xxl { font-size: clamp(calc(var(--xxl-min) * 1px), 11vw, calc(var(--xxl-max) * 1px)); }
.t-xl  { font-size: clamp(calc(var(--xl-min) * 1px), 6.6vw, calc(var(--xl-max) * 1px)); }
.t-h1  { font-size: clamp(calc(var(--h1-min) * 1px), 4.6vw, calc(var(--h1-max) * 1px)); }
.t-h2  { font-size: clamp(calc(var(--h2-min) * 1px), 3.4vw, calc(var(--h2-max) * 1px)); }
.t-h3  { font-size: clamp(calc(var(--h3-min) * 1px), 2.4vw, calc(var(--h3-max) * 1px)); }
.t-h4  { font-size: clamp(calc(var(--h4-min) * 1px), 1.7vw, calc(var(--h4-max) * 1px)); }