/* =============================================================
   brand.css — DIY Friday brand (THE SWAP POINT)

   This is the only file that changes when the brand changes.
   It overrides the brand colour variables and the primary font
   variable defined in tokens.css. Nothing else in the framework
   references brand values directly.

   The variable NAMES map 1:1 to WordPress theme.json palette
   slugs. When confirmed → copy these values into theme.json
   (settings.color.palette + settings.typography.fontFamilies).

   Source: brand/DIY Friday Brand Guide.pdf
           brand/Colour Palette.pdf, brand/Typography.pdf

   Colour usage rules (Brand Guide, "Colour Usage"):
   - Backgrounds: Forest, Slate, Grey, Black and White ONLY
   - Lemon + Olive: titles, headings, buttons, pattern overlays
   - Cobalt + Cornflower: accents only — pop-up text and buttons
     needing explicit attention (focus rings, selected states)

   Typography (homeowner & trade audience):
   - Stack Sans Headline for all headings, subheadings and body
   - Tiffin Latin VF (licensed, universalthirst.com) — commercial
     audience headings only; not loaded in this prototype
   - Graphite Std (Adobe Fonts) — one-sentence alerts/pop-ups
     only; not loaded in this prototype
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@300..700&display=swap');

:root {
    /* Primary typeface — every heading/UI rule updates automatically */
    --wp--preset--font-family--stack-sans-headline: "Stack Sans Headline", Helvetica, Arial, sans-serif;

    /* Brand colours — DIY Friday palette */
    --wp--preset--color--lemon:      #e9f631;  /* primary accent  — buttons, headings on dark, highlights (15% use) */
    --wp--preset--color--olive:      #bac32a;  /* primary shade   — statement chips, pattern overlays     (10% use) */
    --wp--preset--color--forest:     #122627;  /* primary dark    — dark sections, footer                 (25% use) */
    --wp--preset--color--slate:      #2a4244;  /* secondary dark  — alternate dark backgrounds            (10% use) */
    --wp--preset--color--cobalt:     #1836d9;  /* accent          — attention buttons, focus rings         (5% use) */
    --wp--preset--color--cornflower: #375eec;  /* accent tint     — pop-up text, links needing attention   (5% use) */

    /* Brand gradients — statement backgrounds, use sparingly */
    --wp--preset--gradient--forest-to-olive: linear-gradient(160deg, #122627 0%, #2a4244 35%, #bac32a 100%);
    --wp--preset--gradient--cornflower-to-lemon: linear-gradient(135deg, #375eec 0%, #bac32a 60%, #e9f631 100%);
}