/* ===========================================================
   Hotel Jean Paul — Design Tokens
   =========================================================== */
:root{
  /* --- Color: forest / Franconian countryside, not the generic
     cream+terracotta look — deep ink-green, warm stone, brass accent --- */
  --color-ink: #14231C;
  --color-ink-soft: #22362C;
  --color-forest: #3A5245;
  --color-stone: #F5F2EA;
  --color-stone-dim: #EAE5D8;
  --color-white: #FFFFFF;
  --color-brass: #A9793B;
  --color-brass-soft: #D2B27C;
  --color-line: rgba(20,35,28,0.12);
  --color-line-on-dark: rgba(255,255,255,0.16);

  /* --- Type ---
     Fraunces: warm editorial serif with real character for headlines —
     signals "boutique," not "generic template." Inter carries body text
     for maximum legibility at small mobile sizes. Both self-served via
     Google Fonts (see head-common.html). */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Elegant handwritten accent for select titles — gold, cursive, used
     sparingly (see .signature) so it stays a flourish, not the interface. */
  --font-script: "Parisienne", cursive;

  --fs-h1: clamp(2.5rem, 1.9rem + 3vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --fs-body: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --fs-small: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --fs-eyebrow: 0.78rem;

  /* --- Spacing (8px base) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  /* --- Layout --- */
  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 420ms;

  /* --- Elevation --- */
  --shadow-sm: 0 2px 14px rgba(20,35,28,0.08);
  --shadow-md: 0 16px 40px rgba(20,35,28,0.14);
  --shadow-lg: 0 30px 70px rgba(20,35,28,0.22);
}

/* Native cross-document view transitions (2026: universal support) —
   smooths every page-to-page navigation with zero JS. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}