/* ═══════════════════════════════════════════════════════
   CUSTOM PROPERTIES — The Saracen's Head Inn
   Light, airy palette — still warm, still historic
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --ink: #1a1a2e;
  --parchment: #fafaf8;
  --timber: #1a1a2e;
  --ale: #b47a4a;
  --sage: #6b8f71;
  --stone: #7a8594;
  --cream: #ffffff;

  /* ── Extended Palette ── */
  --ale-light: #cc9a6e;
  --ale-dark: #8f5e35;
  --timber-light: #2d5a8a;
  --timber-dark: #0d0d1a;
  --parchment-dark: #f0f0ec;
  --ghost: rgba(200, 210, 220, 0.08);
  --ghost-text: #8a9bb0;
  --border: rgba(26, 26, 46, 0.08);

  /* ── Typography ── */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Type Scale ── */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --text-lg: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --text-xl: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl: clamp(1.8rem, 1.4rem + 2vw, 2.5rem);
  --text-4xl: clamp(2.2rem, 1.5rem + 3.5vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 1.8rem + 4.75vw, 4.5rem);

  /* ── Spacing — more generous ── */
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --space-md: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --space-lg: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-xl: clamp(4rem, 3rem + 5vw, 7rem);
  --space-2xl: clamp(6rem, 4rem + 6vw, 10rem);

  /* ── Layout ── */
  --max-width: 1100px;
  --max-width-narrow: 840px;
  --nav-height: 72px;
  --border-radius: 3px;
  --border-radius-lg: 6px;

  /* ── Shadows — subtler ── */
  --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 26, 46, 0.06);
  --shadow-lg: 0 8px 30px rgba(26, 26, 46, 0.08);
  --shadow-xl: 0 20px 60px rgba(26, 26, 46, 0.1);
  --shadow-card: 0 1px 3px rgba(26, 26, 46, 0.04), 0 0 0 1px var(--border);
  --shadow-card-hover: 0 12px 40px rgba(26, 26, 46, 0.08);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;

  /* ── Grain Overlay ── */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
}