@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');
@import url('./palette.css');
@import url('./shape.css');

/* ============================================================
   Lazy Vacations — TYPE TOKENS  (type.css)
   Single source of truth for fonts + text styling.
   See TOKENS.md for the full spec and edit instructions.

   LAYOUT OF THIS FILE
   1. Font families   — one token per typeface  (--family-*)
   2. Font roles      — 3 jobs, each points at a family (--font-*)
   3. Type scale      — size / line-height / weight / tracking (--t-*)
   4. Text colours    — neutral + brand (--t-color-*)
   5. Role classes    — .t-* , built only from the tokens above
   6. Colour helpers  — .tc-*   (button text colours)
   7. Wireframe chrome — .wf-*   (annotation scaffolding)
   ============================================================ */

:root{
  /* ---------- 1 · FONT FAMILIES (edit a typeface here; load its webfont) ---------- */
  --family-serif:  'Source Serif 4', Georgia, serif;
  --family-sans:   'Source Sans 3', system-ui, sans-serif;
  --family-lato:   'Lato', system-ui, sans-serif;
  --family-sketch: 'Kalam', cursive;            /* wireframe scaffolding only */

  /* ---------- 2 · FONT ROLES (assign a family to each of the 3 jobs) ---------- */
  --font-heading: var(--family-sans);    /* display · sections · card titles · price */
  --font-body:    var(--family-sans);    /* leads · paragraphs · captions · links · input */
  --font-label:   var(--family-lato);    /* eyebrows · buttons · field labels */

  /* ---------- 3 · TYPE SCALE (size / line-height) ---------- */
  --t-size-hero:112px;        --t-leading-hero:1.0;
  --t-size-display:32px;      --t-leading-display:1.15;
  --t-size-section:26px;      --t-leading-section:1.2;
  --t-size-card-title:19px;   --t-leading-card-title:1.25;
  --t-size-perk:17px;          --t-leading-perk:1.3;
  --t-size-lead:15px;         --t-leading-lead:1.4;
  --t-size-body:16px;         --t-leading-body:1.55;
  --t-size-caption:13px;      --t-leading-caption:1.45;
  --t-size-eyebrow:11px;
  --t-size-button:15px;
  --t-size-link:15px;
  --t-size-chip:15px;
  --t-size-field-label:12px;
  --t-size-input:16px;
  --t-size-price:20px;

  /* weights */
  --t-weight-regular:400;
  --t-weight-medium:600;
  --t-weight-600:600;
  --t-weight-bold:700;

  /* tracking */
  --t-track-label:1.5px;   /* eyebrows & field labels (all-caps) */
  --t-track-button:.5px;   /* button labels */

  /* ---------- 4 · TEXT COLOURS ---------- */
  --t-color-white:#fff;
  --t-color-ink:#444;
}

/* dynamic text colours — on * so .t-* text follows the active palette */
*, *::before, *::after{
  --t-color-display:     var(--text, #2a302c);
  --t-color-hero:        var(--text, #2a302c);
  --t-color-card-title:  var(--text, #2a302c);
  --t-color-lead:        var(--text, #2a302c);
  --t-color-body:        var(--text, #2a302c);
  --t-color-chip:        var(--text, #2a302c);
  --t-color-input:       var(--text, #2a302c);
  --t-color-caption:     var(--text-muted, #b0aca0);
  --t-color-label:       var(--text-muted, #b0aca0);
  --t-color-input-muted: var(--text-muted, #b0aca0);
  --t-color-brand:       var(--brand, #2f5a4a);
}

/* ---------- 5 · ROLE CLASSES ---------- */
/* headings → --font-heading */
.t-hero        { font-family:var(--font-heading); font-size:var(--t-size-hero);       font-weight:var(--t-weight-600);    line-height:var(--t-leading-hero);       color:var(--t-color-hero); white-space:nowrap; }
.t-display     { font-family:var(--font-heading); font-size:var(--t-size-display);    font-weight:var(--t-weight-bold);    line-height:var(--t-leading-display);    color:var(--t-color-display); }
.t-section     { font-family:var(--font-heading); font-size:var(--t-size-section);    font-weight:var(--t-weight-600);    line-height:var(--t-leading-section);    color:var(--t-color-brand); }
.t-card-title  { font-family:var(--font-heading); font-size:var(--t-size-card-title); font-weight:var(--t-weight-600);    line-height:var(--t-leading-card-title); color:var(--t-color-card-title); }
.t-perk        { font-family:var(--font-heading); font-size:var(--t-size-perk);       font-weight:var(--t-weight-regular); line-height:var(--t-leading-perk);       color:var(--t-color-display); white-space:nowrap; }
.t-price       { font-family:var(--font-heading); font-size:var(--t-size-price);      font-weight:var(--t-weight-bold);    color:var(--on-accent, #fff); }
/* text → --font-body */
.t-lead        { font-family:var(--font-body);    font-size:var(--t-size-lead);       font-weight:var(--t-weight-regular); line-height:var(--t-leading-lead);       color:var(--t-color-lead); }
.t-body        { font-family:var(--font-body);    font-size:var(--t-size-body);       font-weight:var(--t-weight-regular); line-height:var(--t-leading-body);       color:var(--t-color-body); }
.t-caption     { font-family:var(--font-body);    font-size:var(--t-size-caption);    font-weight:var(--t-weight-regular); line-height:var(--t-leading-caption);    color:var(--t-color-caption); }
.t-link        { font-family:var(--font-body);    font-size:var(--t-size-link);       font-weight:var(--t-weight-medium);  color:var(--t-color-brand); }
.t-chip        { font-family:var(--font-body);    font-size:var(--t-size-chip);       font-weight:var(--t-weight-regular); color:var(--t-color-chip); }
.t-input       { font-family:var(--font-body);    font-size:var(--t-size-input);      font-weight:var(--t-weight-regular); color:var(--t-color-input); }
.t-input.muted { color:var(--t-color-input-muted); }
/* caps labels → --font-label */
.t-eyebrow     { font-family:var(--font-label);   font-size:var(--t-size-eyebrow);    font-weight:var(--t-weight-bold);    letter-spacing:var(--t-track-label);  text-transform:uppercase; color:var(--t-color-label); }
.t-button      { font-family:var(--font-label);   font-size:var(--t-size-button);     font-weight:var(--t-weight-bold);    letter-spacing:var(--t-track-button); text-transform:uppercase; }
.t-field-label { font-family:var(--font-label);   font-size:var(--t-size-field-label);font-weight:var(--t-weight-bold);    letter-spacing:var(--t-track-label);  text-transform:uppercase; color:var(--t-color-label); }

/* emphasis modifier — the brand's bold-green run inside body copy */
.t-strong      { font-weight:var(--t-weight-bold); color:var(--t-color-brand); }

/* ---------- 6 · CONTEXTUAL COLOUR TOKENS (for role-less colour, e.g. buttons) ---------- */
.tc-teal  { color:var(--t-color-brand); }
.tc-white { color:var(--t-color-white); }
.tc-ink   { color:var(--t-color-ink); }
.tc-on-brand  { color:var(--on-brand, #fff); }
.tc-on-accent { color:var(--on-accent, #fff); }

/* ---------- BUTTONS — intent (brand|accent) × style (filled|outline|ghost) × size (md|sm) ---------- */
/* the intent class sets one colour knob (--c / --c-strong / --on-c); styles + states read it. Default = brand. */
.t-btn          { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-label); font-weight:var(--t-weight-bold); text-transform:uppercase; border:1.5px solid transparent; border-radius:var(--btn-radius, var(--radius-sm)); cursor:pointer; text-decoration:none; white-space:nowrap; box-sizing:border-box; transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
                  --c:var(--brand); --c-strong:var(--brand-strong); --on-c:var(--on-brand); }
.t-btn--brand   { --c:var(--brand);  --c-strong:var(--brand-strong);  --on-c:var(--on-brand);  }
.t-btn--accent  { --c:var(--accent); --c-strong:var(--accent-strong); --on-c:var(--on-accent); }
.t-btn--md      { font-size:15px;   letter-spacing:.5px; padding:11px 22px; }   /* regular — page CTAs */
.t-btn--sm      { font-size:12.5px; letter-spacing:.4px; padding:7px 14px; }    /* small — header */
.t-btn--filled  { background:var(--c);    color:var(--on-c); border-color:var(--c); }
.t-btn--outline { background:transparent; color:var(--c);    border-color:var(--c); }
.t-btn--ghost   { background:transparent; color:var(--c);    border-color:transparent; }
.t-btn--inverse         { background:var(--on-c); color:var(--c);    border-color:var(--c); }
.t-btn--inverse-outline { background:transparent; color:var(--on-c); border-color:var(--on-c); }
.t-btn--inverse-ghost   { background:transparent; color:var(--on-c); border-color:transparent; }
/* states (wired) */
.t-btn--filled:hover  { background:var(--c-strong); border-color:var(--c-strong); }
.t-btn--outline:hover { background:var(--c); color:var(--on-c); }
.t-btn--ghost:hover   { background:var(--surface-sunken); }
.t-btn--inverse:hover         { background:color-mix(in oklab, var(--on-c), var(--c) 14%); border-color:var(--c-strong); }
.t-btn--inverse-outline:hover, .t-btn--inverse-ghost:hover { background:color-mix(in oklab, transparent, var(--on-c) 12%); }
.t-btn:active         { transform:translateY(1px); }
.t-btn[disabled], .t-btn.is-disabled { opacity:.5; pointer-events:none; }

/* ---------- PILLS — intent (brand|accent) × fill (filled default · outline) × size; clickable default, static = no hover ---------- */
.t-pill          { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-label); font-weight:var(--t-weight-bold); text-transform:uppercase; border:1.5px solid var(--c); border-radius:999px; cursor:pointer; text-decoration:none; white-space:nowrap; background:var(--c); color:var(--on-c); transition:background .15s ease, color .15s ease, border-color .15s ease;
                   --c:var(--accent); --c-strong:var(--accent-strong); --on-c:var(--on-accent); }
.t-pill--brand   { --c:var(--brand);  --c-strong:var(--brand-strong);  --on-c:var(--on-brand);  }
.t-pill--accent  { --c:var(--accent); --c-strong:var(--accent-strong); --on-c:var(--on-accent); }
.t-pill--outline { background:transparent; color:var(--c); }
.t-pill--inverse         { background:var(--on-c); color:var(--c); border-color:var(--c); }
.t-pill--inverse-outline { background:transparent; color:var(--on-c); border-color:var(--on-c); }
.t-pill--md { font-size:14px; letter-spacing:.5px; padding:11px 24px; }
.t-pill--sm { font-size:12px; letter-spacing:.4px; padding:7px 16px; }
/* hover only when clickable (default); --static opts out */
.t-pill:not(.t-pill--static):not(.t-pill--outline):not(.t-pill--inverse):not(.t-pill--inverse-outline):hover { background:var(--c-strong); border-color:var(--c-strong); }
.t-pill--outline:not(.t-pill--static):hover { background:var(--c); color:var(--on-c); border-color:var(--c); }
.t-pill--inverse:not(.t-pill--static):hover { background:color-mix(in oklab, var(--on-c), var(--c) 14%); }
.t-pill--inverse-outline:not(.t-pill--static):hover { background:color-mix(in oklab, transparent, var(--on-c) 12%); }
.t-pill--static { cursor:default; }

/* ---------- ICON — monochrome mask; colour = currentColor (brand/accent/neutral/inverse) ---------- */
.t-icon { display:inline-block; width:var(--icon-size,24px); height:var(--icon-size,24px); flex-shrink:0; background:currentColor; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }

/* ---------- 7 · WIREFRAME ANNOTATION CHROME (scaffolding, sketch face) ---------- */
.wf-badge    { font-family:var(--family-sketch); font-size:13px; font-weight:var(--t-weight-bold); letter-spacing:.4px; color:var(--t-color-white); }
.wf-tag      { font-family:var(--family-sketch); font-size:12px; font-weight:var(--t-weight-bold); letter-spacing:.4px; color:var(--t-color-white); }
.wf-sublabel { font-family:var(--family-sketch); font-size:10px; font-weight:var(--t-weight-bold); letter-spacing:.3px; color:var(--t-color-white); }
.wf-pill     { font-family:var(--font-label);    font-size:11px; font-weight:var(--t-weight-bold); letter-spacing:.5px; text-transform:uppercase; color:var(--t-color-white); }

/* ============================================================
   8 · RESPONSIVE — container queries on the page ('page')
   Two breakpoints, desktop-first:  Tablet ≤1024  ·  Phone ≤600.
   These literals == --bp-tablet / --bp-phone in shape.css (a @container
   condition can't read a var(), so keep the two in sync).
   ============================================================ */
.lv-section      { position:relative; background:var(--surface); box-shadow:var(--surface-shadow); border-radius:var(--surface-radius); padding:var(--surface-pad); margin:0; border:var(--surface-border); }
/* every non-text box surface reads these — change a token, all update */
.lv-surface      { background:var(--surface); border:var(--surface-border); border-radius:var(--surface-radius); box-shadow:var(--surface-shadow); }
.lv-section-hero { position:relative; background:transparent; box-shadow:none; border:none !important; border-radius:0; padding:0; }

/* ≤1024px — TABLET: hamburger, hero pane → top strip, single-column body */
@container page (max-width: 1024px) {
  .lv-inner           { padding-left:var(--page-gutter-tablet) !important; padding-right:var(--page-gutter-tablet) !important; }
  .lv-burger          { display:inline-flex !important; }
  .lv-nav             { display:none !important; position:absolute !important; top:calc(100% + 8px); left:0; right:0; flex-direction:column !important; align-items:stretch !important; gap:8px !important; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:8px; padding:12px !important; z-index:90; box-shadow:var(--elev-3); }
  .lv-nav.is-open     { display:flex !important; }
  .lv-nav a           { width:100%; }
  .lv-mosaic          { grid-template-columns:1fr !important; grid-template-rows:none !important; height:auto !important; }
  .lv-mosaic > div    { grid-column:auto !important; grid-row:auto !important; height:210px !important; }
  .lv-photogrid       { grid-template-columns:1fr 1fr !important; }
  .lv-hero-media      { min-height:300px !important; }
  .lv-hero-card       { min-width:0 !important; padding:30px 22px !important; }
  .lv-hero-wrapper    { margin-bottom:0 !important; }
  .lv-hero-headline   { width:100% !important; }
  .lv-glass-pane      { position:absolute !important; top:0 !important; bottom:auto !important; left:0 !important; right:0 !important; width:100% !important; flex-direction:row !important; align-items:center !important; border-radius:0 !important; padding:var(--space-3) var(--hero-content-pad-x) !important; gap:42px !important; box-sizing:border-box !important; }
  .lv-glass-pane .t-perk { display:none !important; }
  .lv-grid    { grid-template-columns:1fr !important; }
  .lv-rail    { position:static !important; order:0 !important; top:auto !important; }
  .lv-content { order:1 !important; }
}

/* ≤600px — PHONE: single column, tighter padding */
@container page (max-width: 600px) {
  .lv-inner { --hero-content-pad-x: var(--space-4); }
  .lv-photogrid { grid-template-columns:1fr !important; }
  .lv-mosaic > div { height:180px !important; }
  .lv-glass-pane { padding:var(--space-3) var(--hero-content-pad-x) !important; gap:var(--space-2) !important; justify-content:space-between !important; --glass-icon-size:30px; }
}