/* === Treasure Collection – Design Tokens ===
   Colors & typography from Design 2 / Le Salon handoff.
   Google Fonts are enqueued via functions.php.
   ============================================================ */

:root {
  /* ── Brand colours ── */
  --burgundy:       #3C0A09;
  --burgundy-deep:  #240507;
  --burgundy-soft:  #5A1812;
  --gold:           #D4A24A;
  --gold-bright:    #F5D67A;
  --gold-soft:      #FFE9A8;
  --gold-deep:      #A87825;

  /* ── Ink + paper neutrals ── */
  --ink:            #2A1A12;
  --ink-soft:       #4A372A;
  --ash:            #7A6B5C;
  --stone:          #B8AC95;
  --stone-soft:     #D8CFBA;
  --bone:           #FAF4E6;
  --parchment:      #F2E8D2;
  --linen:          #E8DBBE;

  /* ── Semantic surfaces ── */
  --bg:             var(--bone);
  --bg-alt:         var(--parchment);
  --bg-deep:        var(--burgundy);
  --fg:             var(--ink);
  --fg-soft:        var(--ink-soft);
  --fg-muted:       var(--ash);
  --fg-on-dark:     var(--bone);
  --fg-on-dark-soft: rgba(250, 244, 230, 0.72);
  --accent:         var(--burgundy);
  --accent-on-dark: var(--gold);
  --line:           rgba(42, 26, 18, 0.16);
  --line-strong:    rgba(42, 26, 18, 0.32);
  --line-dark:      rgba(240, 208, 80, 0.32);
  --line-dark-soft: rgba(240, 208, 80, 0.18);

  /* ── Typography ── */
  --font-display:   'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-script:    'Pinyon Script', 'Snell Roundhand', cursive;
  --font-editorial: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* ── Scale ── */
  --fs-eyebrow: 11px;
  --fs-caption: 13px;
  --fs-body:    16px;
  --fs-body-lg: 18px;
  --fs-lead:    22px;
  --fs-h4:      26px;
  --fs-h3:      34px;
  --fs-h2:      48px;
  --fs-h1:      72px;
  --fs-display: 104px;
  --fs-script:  56px;

  /* ── Line heights ── */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ── Tracking ── */
  --tracking-cinzel:  0.08em;
  --tracking-eyebrow: 0.28em;
  --tracking-label:   0.10em;
  --tracking-tight:   -0.005em;

  /* ── Spacing (4pt 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: 192px;

  /* ── Radius (heritage = almost square) ── */
  --r-0:    0px;
  --r-1:    2px;
  --r-2:    4px;
  --r-pill: 999px;

  /* ── Elevation ── */
  --shadow-1:       0 1px 2px rgba(42,26,18,.06), 0 1px 1px rgba(42,26,18,.08);
  --shadow-2:       0 2px 8px rgba(42,26,18,.08), 0 1px 2px rgba(42,26,18,.10);
  --shadow-3:       0 12px 32px rgba(42,26,18,.14), 0 4px 8px rgba(42,26,18,.08);
  --shadow-portrait: 0 24px 60px rgba(42,26,18,.24), 0 6px 16px rgba(42,26,18,.12);

  /* ── Motion ── */
  --ease:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 520ms;

  /* ── Layout ── */
  --max-page:  1320px;
  --gutter:    24px;
  --gutter-lg: 64px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

::selection { background: var(--gold); color: var(--burgundy); }

:where(a,button,input,select,textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}