/* ============================================================
   Lazy Vacations — "Lazy-default" palette  (palette.css)

   Raw colours per skin:  --brand --accent --neutral --on-brand --on-accent
   Everything else DERIVES from them (lighter / darker) via color-mix.

   IMPORTANT: derived tokens are declared on `*` (not :root). A
   :root var() freezes at the root, so overriding the primitives on a
   [data-skin] descendant would NOT re-derive. Declaring them on `*`
   makes each element recompute against its inherited (skin) primitives.
   ============================================================ */

/* ---------- PRIMITIVES — per skin (apply with <div data-skin="…">) ---------- */
:root,
[data-skin="rustic"]  { --brand:#2f5a4a; --accent:#cc6b4a; --neutral:#5e6158; --on-brand:#ffffff; --on-accent:#ffffff; --hero-img:url('images/hero-rustic.avif'); }
[data-skin="coastal"] { --brand:#1f6f8b; --accent:#e3a23c; --neutral:#5c6670; --on-brand:#ffffff; --on-accent:#21303a; --hero-img:url('images/hero-coastal.png'); }
[data-skin="urban"]   { --brand:#ff2d9b; --accent:#c6ff36; --neutral:#6e6e77; --on-brand:#15151a; --on-accent:#15150f; --hero-img:url('images/hero-urban.avif'); }
[data-skin="classy"]  { --brand:#1c2b46; --accent:#c2a14d; --neutral:#5a5d66; --on-brand:#ffffff; --on-accent:#1c2b46; --hero-img:url('images/hero-classy.jpg'); }
[data-skin="cute"]    { --brand:#13b3bd; --accent:#ff5aa8; --neutral:#7d7680; --on-brand:#ffffff; --on-accent:#ffffff; --hero-img:url('images/hero-cute.avif'); }

/* ---------- DERIVED — on * so they follow the active skin ---------- */
*, *::before, *::after{
  /* brand / accent */
  --brand-strong:  color-mix(in oklab, var(--brand),  black 18%);
  --accent-strong: color-mix(in oklab, var(--accent), black 16%);
  /* neutrals: light → dark */
  --background:     color-mix(in oklab, var(--neutral), white 94%);  /* page */
  --surface:        #ffffff;                                         /* cards, panels */
  --surface-sunken: color-mix(in oklab, var(--neutral), white 88%);  /* insets, fills */
  --surface-tint:   color-mix(in oklab, var(--brand), white 90%);    /* brand-tinted fills */
  --border:         color-mix(in oklab, var(--neutral), white 70%);  /* hairlines, inner grids */
  --border-strong:  color-mix(in oklab, var(--neutral), white 55%);  /* main outlines */
  --text-muted:     color-mix(in oklab, var(--neutral), white 30%);  /* captions, labels */
  --text:           color-mix(in oklab, var(--neutral), black 55%);  /* headings & body */
  /* glass */
  --glass-brand-bg: color-mix(in oklab, color-mix(in oklab, var(--brand), black 35%) 50%, transparent);
  /* hero scrim — left panel, brand-derived so it re-themes with the skin */
  --hero-scrim-left: linear-gradient(115deg, color-mix(in srgb, var(--brand) 65%, transparent) 0%, color-mix(in srgb, var(--brand) 30%, transparent) 40%, transparent 66%);
}