/* City on a Hill — guest design system tokens (CH-GUEST-DESIGN v2, 2026-10-13)
 *
 * Three layers:
 *   1. Primitives  — raw palette, never used directly by components.
 *   2. Semantics   — what a value is for (surface, text, accent…). Themed.
 *   3. Scales      — type, space, shape, elevation, motion, layering.
 *
 * Themes follow the day on the hill: `day` (paper), `forest` (garden green)
 * and `night` (lamp-lit). Set `data-theme` on any section; children inherit.
 *
 * Fonts: self-hosted by next/font in src/app/layout.tsx (same Google families and axes as this URL):
 *   https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Hanken+Grotesk:wght@400..700&display=swap
 *   Fraunces  — display voice. Optical size follows font-size automatically.
 *   Hanken Grotesk — everything read, tapped or typed.
 */

:root {
  /* ---------- 1. Primitives ---------- */
  --night-950: #07090c;
  --night-900: #0c1015;
  --night-800: #131a21;
  --night-700: #1d2730;
  --night-600: #2c3842;

  --forest-950: #0d1813;
  --forest-900: #13241c;
  --forest-800: #1a3126;
  --forest-700: #21392d;
  --forest-600: #2f5240;
  --forest-400: #6f9179;
  --forest-200: #c9d6c6;

  --bone-50: #fdfbf7;
  --bone-100: #f7f2e9;
  --bone-200: #efe7da;
  --bone-300: #e2d7c5;
  --bone-400: #cbbfab;

  --stone-500: #8a8275;
  --stone-600: #6b645a;
  --stone-700: #4d473f;
  --stone-900: #1c1a17;

  --lamp-200: #ffe2b8;
  --lamp-300: #ffc680;
  --lamp-400: #f2ae57;
  --lamp-500: #e0913a;
  --lamp-600: #b86d1f;
  --lamp-700: #8f5215;

  /* Dusk: the sky in the photographs. Gradients and illustration only. */
  --dusk-200: #f9dcc9;
  --dusk-300: #f3bfa3;
  --dusk-500: #d9896a;
  --dusk-700: #9b573f;

  --lake-300: #c9d6d8;
  --lake-400: #a9bcc0;
  --lake-600: #5b7a82;

  --success-600: #3f7d58;
  --success-300: #9fd3b4;
  --warning-600: #a8660f;
  --warning-300: #f3c98a;
  --danger-600: #b4483c;
  --danger-300: #ffb0a6;

  /* ---------- 3. Type ---------- */
  --font-display: var(--font-fraunces, 'Fraunces'), 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: var(--font-hanken, 'Hanken Grotesk'), 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* Fraunces voice: soft terminals, no wonk. Flip --display-wonk to 1 for a playful italic. */
  --display-soft: 40;
  --display-wonk: 0;
  --display-weight: 400;

  /* Fluid display sizes (Fraunces). Below 18px use Hanken. */
  --display-xl: clamp(3.25rem, 2rem + 5.4vw, 7rem);        /* 52 → 112  hero */
  --display-lg: clamp(2.5rem, 1.55rem + 3.7vw, 4.75rem);   /* 40 → 76   page / section title */
  --display-md: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);     /* 32 → 52   section */
  --display-sm: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);   /* 26 → 34   card, villa name */
  --display-xs: 1.25rem;                                    /* 20        quotes, taglines (italic) */

  --leading-xl: .95;
  --leading-lg: 1;
  --leading-md: 1.05;
  --leading-sm: 1.12;
  --tracking-xl: -.03em;
  --tracking-lg: -.025em;
  --tracking-md: -.018em;
  --tracking-sm: -.01em;

  /* Sans sizes (Hanken). Nothing on the guest site renders below 12px. */
  --text-xl: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);       /* 20 → 24  titles */
  --text-lg: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);    /* 17 → 19  lede */
  --text-md: 1rem;                                          /* 16 body */
  --text-sm: .875rem;                                       /* 14 secondary, facts */
  --text-xs: .8125rem;                                      /* 13 caption */
  --text-overline: .75rem;                                  /* 12 uppercase only */

  --leading-tight: 1.2;
  --leading-body: 1.65;
  --tracking-overline: .2em;
  --measure: 62ch;

  /* ---------- 3. Space (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  --gutter: clamp(20px, 4.2vw, 72px);
  --section-y: clamp(72px, 3rem + 7vw, 160px);
  --stack-y: clamp(32px, 1.5rem + 2.5vw, 64px);    /* heading → content */
  --container: 1320px;
  --container-narrow: 760px;
  --container-wide: 1600px;
  --header-h: 84px;
  --dock-h: 76px;
  --target: 44px;                                  /* minimum tap target */

  /* ---------- 3. Shape ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Warm-tinted elevation; light comes from above like late sun. */
  --shadow-1: 0 1px 2px rgb(28 22 14 / .06), 0 2px 8px rgb(28 22 14 / .05);
  --shadow-2: 0 2px 4px rgb(28 22 14 / .05), 0 12px 32px -10px rgb(28 22 14 / .2);
  --shadow-3: 0 4px 8px rgb(28 22 14 / .06), 0 32px 72px -24px rgb(28 22 14 / .38);
  --glow-lamp: 0 0 0 1px rgb(242 174 87 / .35), 0 12px 40px -12px rgb(242 174 87 / .55);

  /* Scrims for text over photographs */
  --scrim-hero: linear-gradient(180deg, rgb(7 9 12 / .55) 0%, rgb(7 9 12 / .08) 28%, rgb(7 9 12 / .22) 52%, rgb(7 9 12 / .94) 100%), linear-gradient(90deg, rgb(7 9 12 / .5) 0%, rgb(7 9 12 / 0) 62%);
  --scrim-media: linear-gradient(180deg, rgb(7 9 12 / 0) 45%, rgb(7 9 12 / .72) 100%);
  --scrim-center: linear-gradient(180deg, rgb(7 9 12 / .92) 0%, rgb(7 9 12 / .35) 40%, rgb(7 9 12 / .4) 70%, rgb(7 9 12 / .95) 100%);

  /* ---------- 3. Motion ---------- */
  --dur-instant: 100ms;    /* press, toggle */
  --dur-fast: 180ms;       /* hover, colour */
  --dur-base: 280ms;       /* small movement, menus */
  --dur-slow: 560ms;       /* reveals, panels, dialogs */
  --dur-slower: 900ms;     /* image zoom, words */
  --dur-cinematic: 1400ms; /* scene changes */
  --dur-hero: 2200ms;      /* the first picture settling */

  --ease-out: cubic-bezier(.2, .7, .15, 1);        /* default: settles gently */
  --ease-emphasis: cubic-bezier(.16, 1, .3, 1);    /* reveals: quick start, long glide */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* scene / theme cross-fades */
  --ease-in: cubic-bezier(.5, 0, .75, 0);          /* exits only */
  --ease-spring: cubic-bezier(.34, 1.25, .64, 1);  /* dock, chips: a small overshoot */

  --reveal-distance: 28px;
  --reveal-scale: 1.08;     /* media starts slightly larger and settles */
  --stagger: 70ms;          /* between siblings in a group */
  --words-stagger: 42ms;    /* between words in a headline */
  --parallax: 7%;           /* media drift across the viewport */

  /* ---------- Layering ---------- */
  --z-base: 1;
  --z-sticky: 30;
  --z-header: 40;
  --z-dock: 50;
  --z-overlay: 90;
  --z-toast: 100;
}

/* ---------- 2. Semantic themes ---------- */

:root,
[data-theme="day"] {
  --bg: var(--bone-100);
  --bg-raised: var(--bone-50);
  --bg-sunken: var(--bone-200);
  --bg-inverse: var(--forest-900);
  --bg-glass: rgb(253 251 247 / .82);

  --text: #15201a;
  --text-muted: var(--stone-700);
  --text-subtle: var(--stone-600);
  --text-inverse: var(--bone-100);

  --border: rgb(28 22 14 / .12);
  --border-strong: rgb(28 22 14 / .24);

  --accent: var(--lamp-400);          /* fills: primary buttons, active dots */
  --on-accent: var(--night-950);
  --accent-hover: var(--lamp-300);
  --accent-text: var(--lamp-700);     /* links, overlines, italic emphasis */
  --accent-soft: rgb(242 174 87 / .16);
  --emphasis: var(--forest-600);      /* italic display words */

  --solid: var(--forest-800);         /* secondary filled button */
  --on-solid: var(--bone-50);
  --solid-hover: var(--forest-700);

  --focus: var(--lamp-600);
  --success: var(--success-600);
  --warning: var(--warning-600);
  --danger: var(--danger-600);
  --scrim: rgb(13 24 19 / .55);
  --card-shadow: var(--shadow-1);
  --card-shadow-hover: var(--shadow-2);

  color-scheme: light;
}

[data-theme="forest"] {
  --bg: var(--forest-800);
  --bg-raised: var(--forest-700);
  --bg-sunken: var(--forest-900);
  --bg-inverse: var(--bone-100);
  --bg-glass: rgb(26 49 38 / .8);

  --text: var(--bone-100);
  --text-muted: rgb(247 242 233 / .78);
  --text-subtle: rgb(247 242 233 / .62);
  --text-inverse: var(--forest-900);

  --border: rgb(247 242 233 / .14);
  --border-strong: rgb(247 242 233 / .3);

  --accent: var(--lamp-400);
  --on-accent: var(--night-950);
  --accent-hover: var(--lamp-300);
  --accent-text: var(--lamp-300);
  --accent-soft: rgb(242 174 87 / .18);
  --emphasis: var(--lamp-200);

  --solid: var(--bone-100);
  --on-solid: var(--forest-900);
  --solid-hover: #ffffff;

  --focus: var(--lamp-300);
  --success: var(--success-300);
  --warning: var(--warning-300);
  --danger: var(--danger-300);
  --scrim: rgb(7 9 12 / .6);
  --card-shadow: 0 1px 0 rgb(255 255 255 / .04) inset;
  --card-shadow-hover: var(--shadow-3);

  color-scheme: dark;
}

[data-theme="night"] {
  --bg: var(--night-950);
  --bg-raised: var(--night-800);
  --bg-sunken: #040507;
  --bg-inverse: var(--bone-200);
  --bg-glass: rgb(19 26 33 / .78);

  --text: var(--bone-200);
  --text-muted: rgb(239 231 218 / .76);
  --text-subtle: rgb(239 231 218 / .6);
  --text-inverse: var(--night-950);

  --border: rgb(239 231 218 / .14);
  --border-strong: rgb(239 231 218 / .3);

  --accent: var(--lamp-400);
  --on-accent: var(--night-950);
  --accent-hover: var(--lamp-300);
  --accent-text: var(--lamp-400);
  --accent-soft: rgb(242 174 87 / .16);
  --emphasis: var(--lamp-300);

  --solid: var(--bone-200);
  --on-solid: var(--night-950);
  --solid-hover: #fff8ec;

  --focus: var(--lamp-400);
  --success: var(--success-300);
  --warning: var(--warning-300);
  --danger: var(--danger-300);
  --scrim: rgb(4 5 7 / .7);
  --card-shadow: 0 1px 0 rgb(255 255 255 / .05) inset;
  --card-shadow-hover: var(--glow-lamp);

  color-scheme: dark;
}

[data-theme] {
  background-color: var(--bg);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --dur-cinematic: 1ms;
    --dur-hero: 1ms;
    --reveal-distance: 0px;
    --reveal-scale: 1;
    --stagger: 0ms;
    --words-stagger: 0ms;
    --parallax: 0%;
  }
}