/*
 * Vivly Living design tokens — single source of truth.
 * Values are pixel-read from the Figma file; do not invent values here.
 * Breakpoints (cannot be custom properties in media queries — use literals):
 *   mobile ≤ 767px · tablet 768–1023px · desktop ≥ 1024px
 */
:root {
    /* ── Colour (Figma variables; "Color 8" duplicate merged into cream) ── */
    --vl-cream:      #eee9de;
    --vl-ink:        #32383b;
    --vl-brick:      #ce9761;
    --vl-cornflower: #a5bafa;
    --vl-grey:       #90918c;
    --vl-white:      #ffffff;
    --vl-black:      #000000;

    /* ── Type (served by Adobe Fonts web project "Vivly Living", kit wpv4rvb —
       theme loads no fonts). Omnes Pro uses Adobe's SHIFTED weight numbering:
       Regular=500, Italic=500i, Semibold=700, Light Italic=400i (that exact
       set is what the kit serves). Never request 400 normal or 600 — they
       don't exist as faces; and 400 ITALIC is Light Italic, not Italic. ── */
    --vl-font:            "omnes-pro", sans-serif;
    --vl-weight-regular:  500; /* Omnes Pro Regular (n5) */
    --vl-weight-semibold: 700; /* Omnes Pro Semibold (n7) */
    --vl-weight-light:    400; /* italic only — Omnes Pro Light Italic (i4), display-heading accents */

    --vl-text-display: 70px;  /* display headings, mixed 400/600 (node 2:5) */
    --vl-text-nav:     18px;  /* nav links (node 2:3) */
    --vl-text-body:    18px;  /* body/footer text, 22px line-height (node 3:495) */
    --vl-text-input:   30px;  /* newsletter field + card titles, 32/34px line-height, 2px merge (node 57:51) */
    --vl-text-sm:      12px;  /* legal/copyright, 16px line-height (nodes 3:509, 3:513) */
    --vl-text-hero:    90px;  /* page hero titles, 95px line-height, mixed 400/600 (node 2:293) */
    --vl-text-value:   40px;  /* About "value" card titles, 44px line-height, 600 (node 39:1910) */
    --vl-text-card-title: 24px;  /* update card titles/quote/form labels, 28px line-height (node 2:98) */
    --vl-text-badge:   16px;  /* availability status badges, 16px line-height, 600 (node 35:821) */
    /* Full mapping + sample nodes: docs/design-tokens.md */

    /* ── Layout ── */
    --vl-container: 1600px;  /* max CONTENT width — .vl-container = 1600 + 2×edge */
    --vl-edge:      40px;    /* universal side padding (20px on mobile, override below).
                                At 1920 this reproduces Figma's x=160 content start:
                                (1920 − 1680)/2 auto margin + 40 padding = 160. */
    --vl-header-h:  82px;    /* bar height (hero starts y=82) */

    /* ── Radii ── */
    --vl-radius-pill:  100px; /* Contact pill (node 34:2) */
    --vl-radius-tab:   10px;  /* sticky tab corners (node 35:101) */
    --vl-radius-field: 10px;  /* newsletter field (node 57:50) */
}

/* Side padding: 40px desktop & tablet, 20px mobile (Liam, 2026-07-21).
   Everything padded with --vl-edge (containers, header, footer,
   newsletter band, nav panel) follows automatically. */
@media (max-width: 767px) {
    :root {
        --vl-edge: 20px;
    }
}