/* ============================================================
   Design tokens — Zatonsky Moments homepage
   All colors, type, spacing live here. CMS / Tweaks panel
   can override any of these via :root inline overrides.
   ============================================================ */

:root {
  /* -------- palette (warm cream + dusty rose) ------------ */
  --c-bg:          #efe9dd;   /* page background, museum cream */
  --c-bg-soft:     #e4dcc9;   /* alt section background        */
  --c-bg-dark:     #1a1814;   /* dark sections / footer        */
  --c-paper:       #f6f1e6;   /* lightest paper, cards         */
  --c-ink:         #1f1c18;   /* main text                     */
  --c-ink-soft:    #4a443c;   /* secondary text                */
  --c-muted:       #8c8678;   /* tertiary / labels             */
  --c-line:        #d2c9b5;   /* hairlines, dividers           */
  --c-accent:      #9a6764;   /* desaturated dusty rose        */
  --c-accent-deep: #74494a;   /* darker accent for hover       */
  --c-on-dark:     #efe9dd;   /* text on dark sections         */
  --c-logo:        #1f1c18;   /* wordmark tint on light bg     */
  --c-logo-on-dark: oklch(0.93 0.012 75); /* warm ivory on dark bg */

  /* -------- type ----------------------------------------- */
  --f-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --f-serif:   "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --f-sans:    "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --f-script:  "Italianno", "Pinyon Script", "Cormorant Garamond", cursive;

  --fs-overline: 0.72rem;
  --fs-body:     1.0625rem;     /* 17px */
  --fs-lede:     1.25rem;       /* 20px */
  --fs-h4:       1.5rem;        /* 24px */
  --fs-h3:       2rem;          /* 32px */
  --fs-h2:       clamp(2.25rem, 3vw + 1rem, 3.75rem);
  --fs-h1:       clamp(2.75rem, 5.5vw + 1rem, 6.5rem);
  --fs-display:  clamp(4rem, 12vw + 1rem, 11rem);

  /* -------- spacing (scaled by --density) ---------------- */
  --density: 1;
  --s-1:  calc(4px   * var(--density));
  --s-2:  calc(8px   * var(--density));
  --s-3:  calc(12px  * var(--density));
  --s-4:  calc(16px  * var(--density));
  --s-5:  calc(24px  * var(--density));
  --s-6:  calc(32px  * var(--density));
  --s-7:  calc(48px  * var(--density));
  --s-8:  calc(64px  * var(--density));
  --s-9:  calc(96px  * var(--density));
  --s-10: calc(128px * var(--density));
  --s-11: calc(192px * var(--density));

  /* -------- layout --------------------------------------- */
  --container:     1440px;
  --container-pad: clamp(20px, 4vw, 56px);
  --radius:        2px;
  --radius-lg:     6px;

  /* -------- motion --------------------------------------- */
  --ease:    cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:  180ms;
  --t-med:   360ms;
  --t-slow:  640ms;
}

/* Palette swaps — applied to body via JS Tweaks.
   Default: desaturated cream + dusty rose (museum-quiet). */
body[data-palette="cream-rose"] {
  --c-bg: #efe9dd; --c-bg-soft: #e4dcc9; --c-paper: #f6f1e6;
  --c-accent: #9a6764; --c-accent-deep: #74494a;
  --c-bg-dark: #1a1814; --c-ink: #1f1c18; --c-ink-soft: #4a443c; --c-muted: #8c8678; --c-line: #d2c9b5;
  --c-on-dark: #efe9dd;
  --c-logo: oklch(0.22 0.012 60);
  --c-logo-on-dark: oklch(0.93 0.012 75);
}
body[data-palette="bone-sage"] {
  --c-bg: #ece8de; --c-bg-soft: #ddd6c4; --c-accent: #6b7156; --c-accent-deep: #4d5340;
  --c-bg-dark: #2a2820; --c-ink: #25241e; --c-ink-soft: #4a4940; --c-muted: #898476; --c-line: #cfc8b6;
  --c-logo: oklch(0.22 0.018 95);
  --c-logo-on-dark: oklch(0.93 0.012 95);
}
body[data-palette="ivory-mocha"] {
  --c-bg: #f5f1ea; --c-bg-soft: #e8e0d2; --c-accent: #6e4f3a; --c-accent-deep: #4d3624;
  --c-bg-dark: #221c15; --c-ink: #1f1a14; --c-ink-soft: #4a4036; --c-muted: #8a7e6b; --c-line: #d8ccb6;
  --c-logo: oklch(0.21 0.020 60);
  --c-logo-on-dark: oklch(0.94 0.012 75);
}
body[data-palette="contrast"] {
  --c-bg: #f5f2ed; --c-bg-soft: #e8e3d8; --c-accent: #b04545; --c-accent-deep: #7a2a2a;
  --c-bg-dark: #0e0c0a; --c-ink: #0e0c0a; --c-ink-soft: #34302a; --c-muted: #6e685c; --c-line: #cfc6b3;
  --c-logo: oklch(0.16 0.010 60);
  --c-logo-on-dark: oklch(0.94 0.010 75);
}

/* Density — multiplier on the entire spacing scale */
body[data-density="compact"]  { --density: 0.82; }
body[data-density="regular"]  { --density: 1; }
body[data-density="spacious"] { --density: 1.18; }