/* ============================================================
   Lazy Vacations — STRUCTURE tokens  (shape.css)
   Radius · elevation · spacing / density.
   Internal (not client-exposed). Skins may override any of these
   in their [data-skin] block, e.g. tighter padding or sharper corners.
   ============================================================ */
:root{
  /* ---------- radius ---------- */
  --radius-sm:   6px;
  --radius:      10px;   /* default card / control */
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---------- elevation (shadows) ---------- */
  --elev-1: 0 1px 2px rgba(0,0,0,.05);
  --elev-2: 0 2px 12px rgba(0,0,0,.06);   /* resting card */
  --elev-3: 0 10px 30px rgba(0,0,0,.10);  /* raised / hover */

  /* ---------- spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* ---------- density (semantic spacing — skins may retune) ---------- */
  --gap:         16px;   /* default grid / flex gap */
  --pad-card:    22px;   /* card & panel padding */
  --pad-section: 30px;   /* section padding */
  --section-gap:  15px;  /* gap between sections (all sides) */
  --img-gap:      12px;  /* gap between images inside an image block (global theme token) */

  /* ---------- breakpoints — website level (not per-component) ----------
     Desktop ≥1024 · Tablet ≤1024 · Phone ≤600. The container cap is the
     desktop "1440" token. NOTE: @container/@media conditions can't read a
     var(), so the queries in type.css use these literals — keep them in sync. */
  --container-max: 1440px;   /* desktop content cap (the "1440" BP token) */
  --bp-tablet:     1024px;   /* ≤ this → tablet tier */
  --bp-phone:      600px;    /* ≤ this → phone tier */
  --page-gutter:        24px;   /* desktop page side padding (website token) */
  --page-gutter-tablet: 14px;   /* tablet/phone page side padding */

  /* ---------- aspect ratios (tokens — aspect-ratio reads var() fine) ---------- */
  --ratio-wide:   16 / 9;    /* full · half image */
  --ratio-square: 1 / 1;     /* third image */
  --ratio-pano:   2 / 1;     /* two-thirds image (aligns with a square third in-row) */
  --ratio-map:    20 / 9;    /* map embed — own token, independent of images */

  /* ---------- surface primitives (overridable downstream; --surface-border
       derives from these on * — see note at end of file) ---------- */
  --surface-radius:       0;                    /* shared corner radius — change once, all surfaces follow */
  --surface-border-width: 1px;                  /* border weight */
  --surface-shadow:       none;                 /* no elevation by default */
  --surface-pad:          15px;                 /* inner padding */

  /* ---------- effects: glass · scrim ---------- */
  --glass-bg:     rgba(255,255,255,.52);
  --glass-border: rgba(255,255,255,.5);
  --glass-blur:   18px;
  --glass-shadow: 0 8px 32px rgba(0,0,0,.18);
  --glass-icon-filter: brightness(0) invert(1);
  --glass-pad: 22px;  /* glass pane inner padding (vertical; horizontal = 2×) */
  --glass-icon-size: 42px;  /* perk-icon dimensions; shrinks at the phone breakpoint */
  --hero-content-pad-x: 48px;  /* horizontal inset of hero headline + info band; shrinks on phone */
  /* logo */
  --logo-filter:       brightness(0) invert(1);  /* logo always on-brand (white) — change here to retheme all logos */
  /* hero */
  --hero-glass-offset: 42px;                     /* how far the glass card peeks below the hero photo */
  --hero-scrim-bottom: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 35%, transparent 100%);
  --hero-blur-mask:    linear-gradient(to top, black 0%, black 30%, transparent 62%);
  --scrim:        rgba(0,0,0,.55);

  /* ---------- wireframe annotation tooling (fixed; not the site palette) ---------- */
  --wf-violet:       #7c4dff;
  --wf-ink:          #3a4a47;
  --wf-badge-shadow: 0 2px 0 rgba(0,0,0,.12);
}

/* ---------- surface DERIVED token — on * so it re-derives against the active
   skin / overridden primitives, exactly like palette.css. A :root var() freezes
   its inner var() at the root, so a downstream override of --surface-border-width
   or --border would NOT re-derive --surface-border. Declaring on * fixes that.
   NOTE: only the DERIVED token lives here; its primitives (--surface-border-width,
   --surface-radius) stay on :root so they remain overridable downstream. */
*, *::before, *::after{
  --surface-border: var(--surface-border-width) solid var(--border);
}