/*
 * The Lamora design tokens, from the 2026 Brand Guidelines.
 * Three colours only. On the website White leads the page, Navy carries type,
 * actions and the occasional statement band, and Cream brings warmth.
 * Tints are Navy or Cream at reduced opacity, never new colours.
 */
:root {
    /* Colour */
    --navy: #072163;
    --white: #FEFEFE;
    --cream: #FBEFC9;
    --mist: #F4F5F8;                     /* Navy at 4% on White: soft grey panels */

    --navy-muted: rgb(7 33 99 / 0.74);   /* secondary text on White/Cream (> 4.5:1) */
    --navy-line: rgb(7 33 99 / 0.16);    /* hairline rules on light surfaces */
    --navy-overlay: rgb(7 33 99 / 0.42); /* flat photo overlay where text sits on an image */
    --cream-muted: rgb(251 239 201 / 0.76);
    --cream-line: rgb(251 239 201 / 0.2);

    /* Gold sampled from the monogram (client request), for index numerals on Navy only. */
    --logo-gold: #C8A93A;

    /* Hover tints for the day strip only (client request). Soft enough for Navy text. */
    --tint-blue: #E4EAF4;
    --tint-sage: #E3ECE2;
    --tint-sand: #F7EDCF;
    --tint-clay: #F4E0D8;
    --tint-apricot: #F7E5D1;

    /* Type */
    --font-display: "EB Garamond", Garamond, Georgia, serif;
    --font-sans: "Noto Sans", Arial, Aptos, sans-serif;

    --fs-hero: clamp(2.6rem, 1.55rem + 3.9vw, 5.4rem);
    --fs-display: clamp(2.3rem, 1.5rem + 3vw, 4.4rem);
    --fs-h2: clamp(1.95rem, 1.35rem + 2.1vw, 3.35rem);
    --fs-h3: clamp(1.45rem, 1.25rem + 0.75vw, 1.95rem);
    --fs-h4: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
    --fs-lead: clamp(1.125rem, 1.03rem + 0.35vw, 1.3rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --fs-label: 0.75rem;

    --lh-tight: 1.06;
    --lh-heading: 1.14;
    --lh-body: 1.7;
    --tracking-label: 0.16em;

    /* Space */
    --margin: clamp(20px, 6vw, 120px);
    --max-width: 1440px;
    --gutter: clamp(16px, 2vw, 32px);
    --section: clamp(80px, 11vw, 160px);
    --section-sm: clamp(56px, 7vw, 104px);
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;
    --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);

    /* Elements */
    --radius: 2px;
    --rule: 1px;
    --header-h: 96px;
    --subnav-h: 60px;

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --reveal-duration: 650ms;
}

@media (max-width: 960px) {
    :root {
        --header-h: 76px;
        --subnav-h: 52px;
    }
}