/* ============================================================
   Casa San Blas — design tokens
   Imported from Claude Design: ui_kits/hotel-site (Casona system)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Jost:ital,wght@0,300..600;1,300..600&display=swap');
/* Only the & glyph, for the .cs-amp ampersand next to Italiana. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@300&text=%26&display=swap');

:root {
  /* ── Base palette ─────────────────────────────── */
  --ivory: #F4EFE5;
  --parchment: #FBF8F0;
  --linen: #EDE6D8;
  --ink: #211B16;
  --espresso: #17120E;
  --wine: #6E2B33;
  --wine-deep: #5A2129;
  --champagne: #C2A264;
  --champagne-bright: #D8BC8A;
  --bronze: #86693A;       /* gold for light surfaces: 4.9:1 on ivory */

  /* ── Semantic aliases ─────────────────────────── */
  --surface-page: var(--ivory);
  --surface-raised: var(--parchment);
  --surface-tint: var(--linen);
  --surface-inverse: var(--espresso);

  --text-primary: var(--ink);
  --text-muted: rgba(33, 27, 22, 0.74);
  --text-faint: rgba(33, 27, 22, 0.56);
  --text-inverse: #F1EADD;
  --text-inverse-muted: rgba(241, 234, 221, 0.72);

  --accent-wine: var(--wine);
  --accent-wine-hover: var(--wine-deep);
  --accent-gold: var(--bronze);            /* on ivory, parchment, linen */
  --accent-gold-inverse: var(--champagne-bright); /* on espresso, wine */

  --border-hairline: rgba(33, 27, 22, 0.22);
  --border-hairline-strong: rgba(33, 27, 22, 0.4);
  --border-hairline-inverse: rgba(241, 234, 221, 0.26);
  --border-frame-gold: rgba(194, 162, 100, 0.45);

  --scrim-photo: linear-gradient(rgba(23, 18, 14, 0.10), rgba(23, 18, 14, 0.06) 40%, rgba(23, 18, 14, 0.52));
  --focus-ring: 0 0 0 1px var(--ivory), 0 0 0 3px var(--accent-gold);

  /* ── Families ─────────────────────────────────── */
  --font-display: 'Italiana', 'Didot', 'Bodoni MT', serif;
  --font-accent: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-sans: 'Jost', 'Futura', 'Century Gothic', sans-serif;

  /* ── Type scale ───────────────────────────────── */
  --text-display-xl: clamp(58px, 9vw, 136px);
  --text-display-lg: clamp(42px, 6vw, 84px);
  --text-display-md: clamp(30px, 4vw, 52px);
  --text-title: 28px;
  --text-lead: 21px;
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 12px;

  --leading-display: 1.04;
  --leading-lead: 1.55;
  --leading-body: 1.75;

  --tracking-label: 0.32em;
  --tracking-wide: 0.18em;
  --tracking-display: 0.01em;

  --weight-body: 400;
  --weight-label: 400;
  --weight-strong: 500;

  /* ── Spacing — 4px base, editorial rhythm ─────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px; --space-11: 176px;

  --section-pad-y: var(--space-8);
  --content-max: 1160px;
  --prose-max: 62ch;
  --frame-inset: 28px;

  --radius-none: 0;
  --radius-pill: 999px;

  --ease-drift: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-slow: 600ms;

  --header-h: 96px;
}

@media (max-width: 860px) {
  :root { --section-pad-y: var(--space-7); --frame-inset: 14px; --header-h: 78px; }
}