/* =========================================================================
   variables.css — design tokens
   Change the two --font-* values to re-skin the typography site-wide.
   ========================================================================= */

:root {
    /* ---- Colour ---- */
    --pink:        #ff2d8d;
    --pink-hot:    #ff0080;
    --pink-soft:   #fce4ee;
    --cream:       #fff9fb;
    --white:       #ffffff;
    --neutral:     #eee7ea;
    --charcoal:    #161316;
    --black:       #080808;

    /* ---- Semantic (overridden per section theme) ---- */
    --bg:      var(--white);
    --text:    var(--charcoal);
    --muted:   #6b6469;
    --accent:  var(--pink);
    --line:    #e7dfe3;
    --focus:   var(--black);

    /* ---- Type ---- */
    --font-display: "DM Serif Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --fs-eyebrow: 0.75rem;
    --fs-body:    1.0625rem;
    --fs-lead:    clamp(1.15rem, 0.9rem + 1vw, 1.5rem);
    --fs-h4:      clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    --fs-h3:      clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
    --fs-h2:      clamp(2.1rem, 1.5rem + 3.2vw, 4rem);
    --fs-h1:      clamp(2.9rem, 1.7rem + 6.2vw, 7rem);
    --fs-display: clamp(3.4rem, 1.6rem + 9vw, 9rem);

    /* ---- Spacing ---- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    --space-3xl: 9rem;

    --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);

    /* ---- Layout ---- */
    --maxw:       1280px;
    --maxw-wide:  1500px;
    --maxw-text:  60ch;
    --gutter:     clamp(1.15rem, 4vw, 3rem);
    --header-h:   72px;

    /* ---- Radius (kept small — no pills) ---- */
    --radius-sm: 4px;
    --radius-md: 12px;

    /* ---- Effects ---- */
    --shadow-sm: 0 1px 2px rgba(8, 8, 8, 0.06), 0 6px 20px rgba(8, 8, 8, 0.06);
    --shadow-md: 0 10px 40px rgba(8, 8, 8, 0.14);
    --dur:  0.28s;
    --dur-fast: 0.16s;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- Z-index ---- */
    --z-header:  100;
    --z-mobilenav: 200;
    --z-bookbar: 150;
    --z-lightbox: 300;
    --z-skip:    400;
}

/* ---- Section themes ---- */
.sec--white  { --bg: var(--white);    --text: var(--charcoal); --muted: #6b6469; --line: #e7dfe3; --accent: var(--pink); --focus: var(--black); }
.sec--cream  { --bg: var(--cream);    --text: var(--charcoal); --muted: #6b6469; --line: #ece0e6; --accent: var(--pink-hot); --focus: var(--black); }
.sec--soft   { --bg: var(--pink-soft);--text: var(--charcoal); --muted: #7a5c69; --line: #f2cede; --accent: var(--pink-hot); --focus: var(--black); }
.sec--pink   { --bg: var(--pink);     --text: var(--black);    --muted: #3a0f24; --line: rgba(8,8,8,0.18); --accent: var(--black); --focus: var(--black); }
.sec--black  { --bg: var(--black);    --text: var(--cream);    --muted: #a79ba1; --line: rgba(255,255,255,0.16); --accent: var(--pink); --focus: var(--pink); }

.sec--white  { background: var(--bg); color: var(--text); }
.sec--cream  { background: var(--bg); color: var(--text); }
.sec--soft   { background: var(--bg); color: var(--text); }
.sec--pink   { background: var(--bg); color: var(--text); }
.sec--black  { background: var(--bg); color: var(--text); }