/*
   Design tokens: the Sugar Hex brand (palette and fonts shared by the first marketing mockup and
   the scroll-story mockups in docs/mockups/marketing/story).
   Every colour, font, radius, shadow, size and timing site.css uses is defined here.
   To retheme, change values here. To redesign, also replace site.css (and section markup if needed).
   Text colours are chosen for WCAG AA contrast on the backgrounds they're paired with.
*/
:root {
    /* Palette */
    --color-ink: #171015;                 /* near-black: text, dark sections */
    --color-ink-raised: #241a20;
    --color-plum: #2a1622;                /* deep backdrop used by the story mockups */
    --color-ink-soft: #46333d;            /* secondary text on light (9.9:1 on paper) */
    --color-paper: #fff9f7;               /* page background */
    --color-surface: #ffffff;             /* cards */
    --color-blush: #f8e6e7;               /* soft pink panels */
    --color-blush-light: #fbeeed;
    --color-blush-dark: #f4dadd;
    --color-blush-deep: #efb7c7;          /* stronger pink panels, accents on dark */
    --color-accent: #c64f7c;              /* rose: large text, icons, decoration */
    --color-accent-strong: #a93b65;       /* rose for small text and filled buttons (5.8:1 on paper) */
    --color-muted: #75626b;               /* small print on light (5.4:1 on paper) */
    --color-on-accent: #ffffff;
    --color-line: rgba(23, 16, 21, .12);
    --color-line-strong: rgba(23, 16, 21, .15);
    --color-glass: rgba(255, 249, 247, .86); /* sticky header */
    --color-on-dark: #f8e6e7;
    --color-on-dark-muted: rgba(248, 230, 231, .78);
    --color-on-dark-line: rgba(248, 230, 231, .3);
    --color-on-dark-dots: rgba(239, 183, 199, .18);
    --color-error: #a12a3c;
    --color-error-bg: #fdecef;
    --color-sample-bg: #fff3cd;
    --color-sample-text: #6b5000;
    --color-shadow: rgba(23, 16, 21, .18);
    --color-accent-dots: rgba(198, 79, 124, .14);
    --color-accent-glow: rgba(198, 79, 124, .35);
    --color-blush-deep-faint: rgba(239, 183, 199, .12);
    --color-blush-deep-dash: rgba(239, 183, 199, .55);
    --color-on-accent-faint: rgba(255, 255, 255, .15);

    /* Focus ring */
    --focus-ring: 3px solid var(--color-accent-strong);
    --focus-ring-on-dark: 3px solid var(--color-blush-deep);
    --focus-offset: 3px;

    /* Type */
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-gothic: "Pirata One", "Cormorant Garamond", Georgia, serif;
    --font-body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-base: 1.125rem;
    --text-small: .95rem;
    --text-tiny: .8rem;
    --text-lede: 1.2rem;
    --text-h1: clamp(3.2rem, 7vw, 5.6rem);
    --text-h1-page: clamp(2.8rem, 6vw, 4.6rem);
    --text-h2: clamp(2.5rem, 5vw, 3.8rem);
    --text-h3: 1.85rem;
    --leading-body: 1.55;
    --leading-tight: 1.02;
    --tracking-kicker: .2em;
    --weight-body: 400;
    --weight-bold: 700;
    --weight-heavy: 800;

    /* Layout */
    --wrap: 72rem;
    --wrap-prose: 46rem;
    --gutter: 1.5rem;
    --header-height: 4.75rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-section: 6rem;
    --space-section-tight: 3rem;

    /* Shape */
    --radius: 1.25rem;
    --radius-small: .5rem;
    --radius-pill: 999px;
    --border: 2px solid var(--color-ink);
    --border-thick: 3px solid var(--color-ink);
    --shadow-offset: 8px 8px 0 var(--color-ink);
    --shadow-hero: 14px 16px 0 var(--color-accent);
    --shadow-photo: -14px 14px 0 var(--color-ink);

    /* Motion */
    --ease: cubic-bezier(.2, .75, .25, 1);
    --duration-fast: .15s;
    --duration: .2s;
    --marquee-duration: 32s;
    --sticker-duration: 26s;
}