/* ============================================================
   DESIGN TOKENS — Avli & Phos
   Sampled directly from approved demo. Override per site by
   redefining this file in a child or via :root override.
   ============================================================ */

:root {
    /* Brand palette */
    --c-cream-bg:        #E0D9C5;
    --c-cream-soft:      #EBE2CC;
    --c-accent-beige:    #E2D9C4;
    --c-olive:           #68675F;
    --c-olive-dark:      #57564F;
    --c-olive-light:     #83796B;
    --c-text:            #2A2722;
    --c-text-muted:      #6B6759;
    --c-white:           #FFFFFF;
    --c-black:           #1A1815;

    /* Aliases for clarity in components */
    --bg-page:           var(--c-cream-bg);
    --bg-footer:         var(--c-olive);
    --bg-button:         var(--c-olive);
    --color-on-bg:       var(--c-text);
    --color-on-footer:   var(--c-cream-soft);
    --color-on-button:   var(--c-cream-bg);
    --color-eyebrow:     var(--c-text-muted);
    --color-rule:        rgba(60, 57, 52, 0.12);

    /* Typography — Noto Serif Display for editorial headings, Noto Serif for body, Inter for UI labels */
    --font-serif: "Noto Serif Display", "Times New Roman", Georgia, serif;
    --font-sans:  "Noto Serif", "Times New Roman", Georgia, serif;
    --font-ui:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Type scale (clamp-based, fluid) */
    --fs-eyebrow:   clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem);  /* ~10–12px */
    --fs-body-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
    --fs-body:      clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
    --fs-body-lg:   clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
    --fs-h6:        clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
    --fs-h5:        clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --fs-h4:        clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-h3:        clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
    --fs-h2:        clamp(2.25rem, 1.7rem + 2.5vw, 3.75rem);
    --fs-h1:        clamp(2.75rem, 2rem + 3.5vw, 5rem);
    --fs-display:   clamp(3.5rem, 2.5rem + 5vw, 7rem);
    --fs-mega:      clamp(8rem, 6rem + 12vw, 18rem);  /* outline numbers */

    /* Letter spacing */
    --ls-eyebrow:   0.32em;
    --ls-tight:     -0.015em;
    --ls-normal:    0;

    /* Line heights */
    --lh-tight:     1.05;
    --lh-snug:      1.15;
    --lh-normal:    1.5;
    --lh-relaxed:   1.7;

    /* Spacing scale (8px-based but fluid) */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  3rem;
    --sp-8:  4rem;
    --sp-9:  6rem;
    --sp-10: 8rem;
    --sp-11: 12rem;

    /* Section paddings (responsive) */
    --section-y: clamp(4rem, 2.5rem + 6vw, 9rem);
    --section-x: clamp(1.25rem, 0.5rem + 3vw, 4rem);

    /* Container max-widths */
    --w-prose:   42rem;
    --w-content: 72rem;
    --w-wide:    88rem;
    --w-bleed:   100%;

    /* Radii */
    --r-pill:    999px;
    --r-md:      6px;
    --r-lg:      12px;

    /* Shadows */
    --shadow-soft:  0 2px 12px rgba(60, 57, 52, 0.08);
    --shadow-lift:  0 8px 32px rgba(60, 57, 52, 0.14);

    /* Motion */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);    /* expo-out: smooth, lingering */
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --d-fast:       180ms;
    --d-base:       360ms;
    --d-slow:       720ms;
    --d-reveal:     1100ms;                            /* dedicated, slow reveal */

    /* Floating circle buttons */
    --btn-circle:    3.5rem;   /* 56px */
    --btn-circle-lg: 4.25rem;  /* 68px - BOOK button */

    /* Z-index scale */
    --z-overlay:  40;
    --z-header:   50;
    --z-menu:     60;
    --z-toast:    70;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --d-fast:  0ms;
        --d-base:  0ms;
        --d-slow:  0ms;
    }
}