/* ─────────────────────────────────────────────────────────────
   Provence — Theme Tokens
   All colors, fonts, spacing, and other style primitives live here.
   Templates (skins) override these tokens via [data-theme="..."].
   Block CSS files MUST only consume tokens, never hardcode values.
   ───────────────────────────────────────────────────────────── */

:root,
[data-theme="provence"] {

  /* ── Color palette ──────────────────────────────────────── */
  --color-bg:           #FEF8F3;   /* ivory */
  --color-surface:      #F8F3ED;   /* slightly warmer ivory for alt sections */
  --color-text:         #1F1B16;   /* deep charcoal */
  --color-text-muted:   #4C463F;   /* muted charcoal */
  --color-text-subtle:  #7D766E;   /* even more muted (italic captions) */
  --color-accent:       #B08D57;   /* antique gold */
  --color-accent-soft:  rgba(176, 141, 87, 0.2);
  --color-line:         #B08D57;   /* hairline gold */
  --color-border-soft:  #CEC5BC;   /* subtle dividers */
  --color-white:        #FFFFFF;

  /* ── Typography ─────────────────────────────────────────── */
  --font-serif:    "Noto Serif", "Playfair Display", Georgia, serif;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-display:    clamp(56px, 9vw, 120px);   /* hero couple names */
  --fs-h1:         clamp(36px, 5vw, 64px);    /* section titles */
  --fs-h2:         clamp(24px, 3vw, 32px);    /* sub-headings */
  --fs-h3:         clamp(20px, 2vw, 24px);    /* card titles */
  --fs-body:       18px;
  --fs-body-sm:    15px;
  --fs-label:      12px;
  --fs-italic:     24px;

  --lh-tight:      1.1;
  --lh-normal:     1.6;
  --lh-relaxed:    1.8;

  --tracking-wide:    0.2em;
  --tracking-wider:   0.3em;
  --tracking-widest:  0.4em;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-6:   48px;
  --space-8:   64px;
  --space-12:  96px;
  --space-16:  128px;
  --space-20:  160px;     /* section gap */
  --space-24:  192px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:      1200px;
  --container-narrow:   720px;
  --container-form:     520px;
  --page-padding:       64px;
  --page-padding-sm:    24px;

  /* ── Borders & lines ───────────────────────────────────── */
  --border-hairline:    1px solid var(--color-line);
  --border-soft:        1px solid var(--color-border-soft);

  /* ── Motion ─────────────────────────────────────────────── */
  --transition-fast:    150ms ease-out;
  --transition-base:    300ms ease-out;
  --transition-slow:    600ms ease-out;

  /* ── Hero background image ─────────────────────────────────
     Overlay opacity: 1.0 = pure ivory (image invisible),
                      0.0 = full image (no overlay).
     Sweet spot for editorial mood: 0.82–0.90.
     Set --hero-bg-image to "none" to disable the image entirely. */
  --hero-bg-image:      url("https://images.unsplash.com/photo-1499002238440-d264edd596ec?auto=format&fit=crop&w=2400&q=80");
  --hero-bg-overlay:    0.86;
  --hero-bg-blur:       2px;
}