/* ==========================================================================
   Pagehus kit-2026 · tokens.css
   Design tokens only. Builder picks ONE theme via <html data-theme="…">.
   Do not add colours or sizes outside this file. All text pairs are AA-checked
   (see tools/contrast.py → renders/contrast.txt).
   ========================================================================== */

:root {
  /* ---- Fluid type scale (min @390px → max @1440px) ---- */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);   /* 12 → 13  caption */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13 → 14  meta    */
  --step-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);      /* 16 → 17  body    */
  --step-1:  clamp(1.0625rem, 1rem + 0.29vw, 1.25rem);      /* 17 → 20  lead    */
  --step-2:  clamp(1.25rem, 1.15rem + 0.43vw, 1.5rem);      /* 20 → 24  h3      */
  --step-3:  clamp(1.625rem, 1.4rem + 0.95vw, 2.25rem);     /* 26 → 36  h2 small*/
  --step-4:  clamp(2rem, 1.6rem + 1.7vw, 3.25rem);          /* 32 → 52  h2      */
  --step-5:  clamp(2.625rem, 1.85rem + 3.3vw, 5rem);        /* 42 → 80  h1      */
  --step-6:  clamp(3rem, 1.9rem + 4.7vw, 6.5rem);           /* 48 → 104 display */

  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --track-display: -0.035em;
  --track-head: -0.02em;
  --track-caps: 0.08em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.7vw, 3rem);            /* 20 → 48 */
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);              /* 72 → 136 */
  --container: 82rem;                                        /* 1312 */
  --container-narrow: 46rem;

  /* ---- Radii ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* ---- Shadows (only floating UI uses them; cards do not) ---- */
  --shadow-1: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 2px 8px rgb(var(--shadow-rgb) / .05);
  --shadow-2: 0 2px 6px rgb(var(--shadow-rgb) / .06), 0 12px 32px rgb(var(--shadow-rgb) / .10);
  --shadow-3: 0 4px 12px rgb(var(--shadow-rgb) / .08), 0 24px 64px rgb(var(--shadow-rgb) / .18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);   /* sheets / panels */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 560ms; --dur-5: 900ms;

  /* ---- Layout chrome ---- */
  --banner-h: 2.25rem;
  --header-h: 4.75rem;
  --header-h-compact: 3.75rem;
  --z-header: 50; --z-bar: 60; --z-chat: 70; --z-sheet: 80; --z-lightbox: 90;
}

/* ==========================================================================
   Themes. Each sets the SAME variable names. AA: --ink, --ink-2 on --paper and
   --paper-2; --on-accent on --accent; --accent-text on --paper (≥4.5:1).
   ========================================================================== */

/* Atlantic: coastal villas & apartments (Holiferias) */
:root, [data-theme="atlantic"] {
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-accent: 'Instrument Serif', Georgia, serif;   /* italic accent words only */
  --display-weight: 500;
  --paper: #f8f6f1;  --paper-2: #efebe3;  --surface: #ffffff;
  --ink: #10263a;    --ink-2: #4a5b69;    --line: #ddd7cc;
  --accent: #1c4f8c; --accent-hover: #163f71; --on-accent: #ffffff;
  --accent-text: #1c4f8c;
  --deep: #0e2233;   --on-deep: #f3efe7;  --on-deep-2: #b9c3cc;
  --shadow-rgb: 16 38 58;
}

/* Stone: guesthouses, B&Bs, townhouses */
[data-theme="stone"] {
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-accent: 'Newsreader', Georgia, serif;
  --display-weight: 500;
  --paper: #f4f1ec;  --paper-2: #e9e4dc;  --surface: #fbfaf7;
  --ink: #1e1b18;    --ink-2: #5a524b;    --line: #d8d0c4;
  --accent: #7a4b2a; --accent-hover: #633c21; --on-accent: #ffffff;
  --accent-text: #7a4b2a;
  --deep: #221d19;   --on-deep: #f1ebe2;  --on-deep-2: #c2b8ac;
  --shadow-rgb: 30 27 24;
}

/* Cabin: cabins, lodges, mountain stays */
[data-theme="cabin"] {
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-accent: 'Fraunces', Georgia, serif;
  --display-weight: 400;
  --paper: #eef0ea;  --paper-2: #e2e6dd;  --surface: #f8f9f5;
  --ink: #18221d;    --ink-2: #4c5850;    --line: #cdd3c8;
  --accent: #2f5b45; --accent-hover: #244936; --on-accent: #ffffff;
  --accent-text: #2f5b45;
  --deep: #17201b;   --on-deep: #eef0ea;  --on-deep-2: #b4beb6;
  --shadow-rgb: 24 34 29;
}

/* Table: restaurants and cafés */
[data-theme="table"] {
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'EB Garamond', Georgia, serif;
  --font-accent: 'EB Garamond', Georgia, serif;
  --display-weight: 500;
  --paper: #f6efe6;  --paper-2: #ece2d5;  --surface: #fdf9f4;
  --ink: #24170f;    --ink-2: #5f4c3f;    --line: #dccdbb;
  --accent: #9a3b22; --accent-hover: #7f301b; --on-accent: #ffffff;
  --accent-text: #9a3b22;
  --deep: #23160e;   --on-deep: #f6efe6;  --on-deep-2: #cdbcab;
  --shadow-rgb: 36 23 15;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; }
}