/* ==========================================================================
   INOSSI — Design Tokens
   Foundation custom properties, extracted from the current production
   styles (main.css, navigation.css). Values below match existing visuals —
   adopting them is not expected to change how the page looks.
   Consuming stylesheets should use var(--token, <fallback>) so pages that
   do not yet link this file keep rendering correctly.
   ========================================================================== */

:root {
    /* ---------- Color ---------- */
    --color-bg: #fff;
    --color-ink: #000;
    --color-text: #111;
    /* Was #7b7b7b, which measured 4.23:1 on white and 3.86:1 on the cream band
       — both under WCAG AA's 4.5:1 for body text, on every page (footer address,
       hours, disclaimers, form hints). #6b6b6b gives 5.33 on white and 4.86 on
       cream while staying visibly "muted" next to --color-text. PENDING 0.5. */
    --color-text-muted: #6b6b6b;
    --color-accent: #d2ab66;
    /* Gold for TEXT only. The brand gold above is 2.15:1 on white — it fails AA
       even at large-text 3:1 — so words set in it (prices, service names,
       eyebrows, kickers) use this darker bronze instead: 5.24:1 on white,
       4.78:1 on cream. --color-accent stays the brand colour and keeps every
       non-text job: rules, borders, icons, glyphs, focus rings, the signature.
       Decision by Pasha 11.08.2026 — fix text, keep the identity. PENDING 0.24.
       ⚠️ No gold passes AA on the beige --color-accent-soft (#ddcdbc): the best
       this hue can do there is ~3.1:1. Don't set gold text on beige. */
    --color-accent-text: #856828;
    --color-accent-soft: #ddcdbc;
    --color-accent-soft-hover: #bcaea0;
    --color-focus: #d2ab66;
    --color-band: #f8f4ee;
    --color-error: #b3261e;
    --color-error-text: #8c1d18;

    /* ---------- Typography ---------- */
    --font-body: 'Lato', sans-serif;
    --font-accent: 'tyScript', 'classicaOne', cursive;
    /* Editorial serif for section headings. Unlike --font-accent (decorative,
       banned on structural headings) this one IS for headings — it carries the
       hierarchy that the script face is not allowed to. Currently used only on
       Services/facial-massage.html via .service-page--editorial; pages that
       don't opt in never request the font. */
    --font-display: 'Cormorant Garamond', Georgia, serif;

    --font-size-h1: clamp(2rem, 4vw, 4rem);
    --font-size-h2: clamp(2.4rem, 5vw, 3.8rem);
    --font-size-h3: clamp(2rem, 4vw, 2.8rem);
    --font-size-body: clamp(1rem, 1.4vw, 1.15rem);
    --font-size-nav-link: 2rem;

    --line-height-h1: 1.15;
    --line-height-heading: 1.2;
    --line-height-body: 1.7;

    --font-weight-nav-link: 350;

    /* ---------- Spacing scale (for new sections; not retrofitted onto
       legacy blocks slated for rework in later stages) ---------- */
    --space-xs: 10px;
    --space-sm: 20px;
    --space-md: 40px;
    --space-lg: 60px;
    --space-xl: 90px;

    /* ---------- Layout widths ---------- */
    --width-container: min(100% - 40px, 1400px);
    --width-container-mobile: min(100% - 30px, 1200px);
    --edge-inset: 3mm;
    --width-band: calc(100% - 2 * var(--edge-inset));
    --width-content: 1100px;
    --width-text-block: 900px;

    /* ---------- Borders & radii ---------- */
    --radius-circle: 50%;
    --radius-sm: 5px;
    --border-width-button: 1px;
    --border-width-frame: 18px;
    --border-width-frame-mobile: 14px;

    /* ---------- Shadows ---------- */
    --shadow-soft: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* ---------- Motion ---------- */
    --duration-fast: 0.15s;
    --duration-base: 0.25s;
    --duration-slow: 0.5s;
    --ease-standard: ease;
    --ease-in-out: ease-in-out;
}

/* ---------- Responsive breakpoints (reference only) ----------
   CSS custom properties cannot be read inside @media conditions, so these
   are documented here for consistency across stylesheets rather than
   consumed via var(). Required QA widths (project rule):
   320, 375, 390, 430, 768, 1024, 1280, 1440, 1920.
   Current homepage breakpoints (unchanged in this stage — see the
   implementation roadmap for their eventual alignment to the QA set):
     max-width: 400px   – small mobile
     max-width: 650px   – mobile
     min-width: 700px   – desktop hero/header switch
     max-width: 900px   – tablet
     max-height: 500px  – landscape fix
   ------------------------------------------------------------- */