/* =========================
   DESIGN TOKENS
   Editorial redesign — serif display, terracotta accent,
   warm dark/light surfaces
========================= */

:root {

    /* ================= Core palette ================= */

    /* Dark surface — warm near-black. Also used as heading
       colour on light surfaces. */
    --color-primary: #16130F;

    /* Terracotta accent */
    --color-accent: #C87A3E;

    /* Softer accent — italic emphasis on dark backgrounds */
    --color-accent-soft: #D08B52;

    /* Warm off-white page surface */
    --color-bg: #FAF9F5;
    --color-bg-tint: #F2EEE5;

    /* Body text on light surfaces */
    --color-text: #1A1613;

    /* Muted text on light surfaces */
    --color-muted: #5C564E;

    /* ================= On dark surfaces ================= */

    --color-text-on-dark: #F2EFE9;
    --color-muted-on-dark: #9A948C;
    --color-border-on-dark: rgba(242, 239, 233, 0.14);

    /* ================= Semantic ================= */

    --color-border: rgba(26, 22, 19, 0.12);
    --color-white: #ffffff;

        /* ================= Typography ================= */

    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Scale multipliers — set by the Customizer typography section.
       Multipliers rather than fixed sizes, so clamp() fluid scaling
       survives. Tracking is in em, so it scales along with size. */
    --scale-display: 1;
    --scale-subhead: 1;
    --scale-body: 1;
    --scale-label: 1;
    --scale-button: 1;
    --scale-card: 1;

    /* Labels — uppercase, letterspaced eyebrows and meta */
    --fs-xs: calc(clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem) * var(--scale-label));

    /* Body */
    --fs-sm: calc(clamp(0.875rem, 0.8rem + 0.3vw, 1rem) * var(--scale-body));
    --fs-base: calc(clamp(1rem, 0.95rem + 0.4vw, 1.125rem) * var(--scale-body));

    /* Subheadings and lead text */
    --fs-lg: calc(clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem) * var(--scale-subhead));

    /* Display — enlarged, Cormorant has a small x-height and reads
       smaller than Poppins at the same px value */
    --fs-xl: calc(clamp(2rem, 1.6rem + 1.6vw, 2.75rem) * var(--scale-display));
    --fs-2xl: calc(clamp(2.5rem, 1.9rem + 3vw, 4rem) * var(--scale-display));
    --fs-3xl: calc(clamp(3rem, 2.2rem + 4.5vw, 5.5rem) * var(--scale-display));

    /* Buttons — separate role, uppercase and letterspaced */
    --fs-button: calc(clamp(0.78rem, 0.74rem + 0.18vw, 0.9rem) * var(--scale-button));
    
        /* Cards — one scale for every card type */
    --fs-card-title: calc(clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem) * var(--scale-card));
    --fs-card-body:  calc(clamp(0.875rem, 0.8rem + 0.3vw, 1rem)     * var(--scale-card));
    --fs-card-meta:  calc(clamp(0.7rem, 0.66rem + 0.18vw, 0.8rem)   * var(--scale-card));
    
    /* ================= Spacing Scale ================= */

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ================= Layout ================= */

    --container-width: 1920px;
    --container-padding: clamp(1.5rem, 6vw, 7rem);

    --header-height: 84px;
    --section-padding: clamp(4rem, 9vw, 9rem);

    /* ================= Radius ================= */

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --radius-card: 12px;

    /* ================= Shadows ================= */
    /* Retained for the programs, blog and testimonial sections
       that aren't being redesigned yet */

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* ================= Animation ================= */

    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Soft deceleration — used for the fade-ins */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

    --dur-draw: 0.34s;
    --ease-draw: cubic-bezier(0.22, 1, 0.36, 1);

    --tracking-label: 0.12em;
    --tracking-display: -0.01em;
}