/* ==========================================================================
   Designer Flair - design tokens
   Black + white + gold. Gold is an accent, never a background for body copy.
   ========================================================================== */

:root {
    /* ---- Colour ---------------------------------------------------------
       The brass gold sampled from the Designer Flair wordmark is --gold. It is
       decorative: it does not have enough contrast against white for small text,
       so --gold-deep is used wherever gold appears at body size on a light
       background, and --gold-light wherever gold sits on black.               */
    --ink: #0e0e0e;
    --ink-soft: #1c1a18;
    --ink-70: rgba(14, 14, 14, .7);

    --paper: #ffffff;
    --ground: #f5f3ef; /* warm off-white section background */
    --ground-deep: #ebe7e0;

    --gold: #c6a15b; /* the brand brass - buttons, rules, numerals */
    --gold-deep: #8a6d28; /* gold text on light backgrounds (AA at body size) */
    --gold-light: #d9bd85; /* gold text on black backgrounds */

    /* The wordmark is gold on black on the printed business card. On a white
       header that exact brass is too pale to read, so the mark uses a deeper
       antique gold on light backgrounds and the lighter brass on dark ones. */
    --gold-logo-on-light: #a6752a;
    --gold-logo-on-dark: #e0c08a;

    --text: #171514;
    --text-muted: #6b6560;
    --text-on-dark: rgba(255, 255, 255, .78);

    --line: #e3ded5;
    --line-strong: #cdc5b8;
    --line-on-dark: rgba(255, 255, 255, .16);

    --focus: #8a6d28;

    /* ---- Type ---------------------------------------------------------- */
    --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
    --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* The Designer Flair wordmark only. Matched to the script on the printed
       business card - see Components/Shared/Logo.razor. */
    --font-logo: "Lobster Two", "Brush Script MT", "Segoe Script", cursive;

    /* Fluid type. The hero is deliberately the only step above --fs-h1.
       Its lower bound is set so that "Transforming" - the longest word on the
       page - still fits on one line inside a 320px screen. */
    --fs-hero: clamp(2.3rem, 1.05rem + 6.6vw, 7rem);
    --fs-h1: clamp(2.1rem, 1.35rem + 3.1vw, 4rem);
    --fs-h2: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
    --fs-h3: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
    --fs-lead: clamp(1rem, .96rem + .3vw, 1.175rem);
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-eyebrow: clamp(.688rem, .65rem + .15vw, .75rem);
    --fs-numeral: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);

    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-body: 1.7;

    --ls-eyebrow: .22em;
    --ls-button: .16em;
    --ls-nav: .1em;

    /* ---- Space --------------------------------------------------------- */
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Vertical rhythm of the page: every section uses this. Deliberately
       tighter than the usual "luxury" spacing - generous white space reads as
       considered up to a point, and past that it just reads as an unfinished
       page with the content pushed to the edges. */
    --section-y: clamp(2.5rem, 3.6vw, 3.5rem);
    --section-y-tight: clamp(2rem, 2.8vw, 2.75rem);

    /* Gap between a section's heading block and the content beneath it. */
    --heading-gap: clamp(1.75rem, 2.6vw, 2.5rem);

    /* ---- Layout -------------------------------------------------------- */
    --container: 1360px;
    --container-wide: 1560px;
    --container-narrow: 760px;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);

    --header-h: 84px;
    --announce-h: 44px;

    /* ---- Surface --------------------------------------------------------
       Corners were square originally. They are softened now because the site
       was asked to read as modern rather than traditional, and the radius is
       the single biggest lever on that. Everything - buttons, inputs, cards,
       slides - draws its corner from these two tokens, so setting --radius
       back to 0 returns the whole site to the original square treatment. */
    --radius: 10px;
    --radius-sm: 6px;

    /* Layered shadows: a tight contact shadow plus a wide soft one. A single
       large blur reads as a grey smudge; two layers read as depth. */
    --shadow: 0 1px 2px rgba(23, 21, 20, .05), 0 12px 28px -14px rgba(23, 21, 20, .22);
    --shadow-lift: 0 2px 4px rgba(23, 21, 20, .06), 0 26px 50px -20px rgba(23, 21, 20, .3);

    --transition: 220ms cubic-bezier(.22, .61, .36, 1);
    --transition-slow: 620ms cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 900px) {
    :root {
        --header-h: 68px;
        --announce-h: 40px;
    }
}