/* =============================================================
   tokens.css — WordPress Preset Variable Definitions
   
   These CSS custom properties mirror what theme.json generates
   in WordPress. Defining them here lets style.css work in the
   browser standalone for concept prototyping.

   Load order in every page:
     1. tokens.css          ← this file (base variables + reset)
     2. brand.css           ← overrides colours + fonts only
     3. style.css           ← unchanged, WordPress-compatible
     4. chrome/chrome.css   ← header + footer template-part styles
     5. patterns/patterns.css ← pattern component styles

   When the brand is confirmed, update theme.json with the
   chosen colour hex values and font family names.
   ============================================================= */


/* -------------------------
   Minimal Reset
   -------------------------  */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    color: var(--wp--preset--color--soft-black);
    background-color: var(--wp--preset--color--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* -------------------------
   CSS Custom Properties
   -------------------------  */
:root {

    /* ---
       Font families
       Override in concept files to swap the typeface
    --- */
    --wp--preset--font-family--stack-sans-headline: "Stack Sans Headline", Helvetica, Arial, sans-serif;


    /* ---
       Font sizes  (fixed — do not override in concept files)
    --- */
    --wp--preset--font-size--h-1: 4.5rem;           /* 72px */
    --wp--preset--font-size--h-2: 3.375rem;          /* 54px */
    --wp--preset--font-size--h-3: 2rem;              /* 32px */
    --wp--preset--font-size--h-4: 1.5rem;            /* 24px */
    --wp--preset--font-size--h-5: 1.125rem;          /* 18px */
    --wp--preset--font-size--text-regular: 1.125rem; /* 18px */
    --wp--preset--font-size--caption: 0.9rem;          /* 16px */
    --wp--preset--font-size--small: 0.875rem;        /* 14px */


    /* ---
       Spacing  (fixed — do not override in concept files)
    --- */
    --wp--preset--spacing--xxxs: 0.5rem;    /*  8px */
    --wp--preset--spacing--xxs:  0.75rem;   /* 12px */
    --wp--preset--spacing--xs:   1rem;      /* 16px */
    --wp--preset--spacing--ms:   1.5rem;    /* 24px */
    --wp--preset--spacing--md:   2rem;      /* 32px */
    --wp--preset--spacing--ml:   2.5rem;    /* 40px */
    --wp--preset--spacing--lg:   3rem;      /* 48px */
    --wp--preset--spacing--xl:   5rem;      /* 80px */
    --wp--preset--spacing--xxl:  7.5rem;    /* 120px */


    /* ---
       Custom theme values  (fixed)
    --- */
    --wp--custom--stroke-border-width: 1px;
    --wp--custom--container-narrow:  322px;
    --wp--custom--container-regular: 144px;
    --wp--custom--container-large:    64px;


    /* ---
       Neutral colours  (fixed — rarely change between concepts)
    --- */
    --wp--preset--color--soft-black: #171717;
    --wp--preset--color--dark-grey:  #595959;
    --wp--preset--color--mid-grey:   #a9b4b8;
    --wp--preset--color--pale-grey:  #dcddde;  /* = brand "Grey" (Pantone 7541 C) */
    --wp--preset--color--soft-grey:  #f4f5f2;
    --wp--preset--color--white:      #ffffff;


    /* ---
       Brand / accent colours — DIY Friday palette
       These are the DEFAULT values; brand.css overrides them
       (same values — kept in sync so pages work if brand.css
       is ever omitted). Names map 1:1 to theme.json slugs.

       Semantic roles (see brand/Colour Palette.pdf):

         lemon      → Primary accent
                      (primary buttons, headings on dark, highlights)

         olive      → Primary shade
                      (statement chips, pattern overlays, depth)

         forest     → Primary dark
                      (dark section backgrounds, footer — 25% use)

         slate      → Secondary dark
                      (alternate dark section backgrounds)

         cobalt     → Accent — attention only
                      (focus rings, selected states, attention buttons)

         cornflower → Accent tint — attention only
                      (pop-up text, links needing attention)

       Backgrounds may ONLY be forest, slate, grey, black, white.
    --- */
    --wp--preset--color--lemon:      #e9f631;
    --wp--preset--color--olive:      #bac32a;
    --wp--preset--color--forest:     #122627;
    --wp--preset--color--slate:      #2a4244;
    --wp--preset--color--cobalt:     #1836d9;
    --wp--preset--color--cornflower: #375eec;
}


/* -------------------------
   Responsive spacing overrides
   (mirrors the media query already in style.css)
   -------------------------  */
@media (max-width: 900px) {
    :root {
        --wp--preset--spacing--lg:  2.5rem; /* collapses from 48px to 40px */
        --wp--preset--spacing--xl:  2.5rem; /* collapses from 80px to 40px */
        --wp--preset--spacing--xxl: 4rem;   /* collapses from 120px to 64px */
    }
}


/* -------------------------
   Layout helpers
   WordPress's block editor normally injects flex / flow layout CSS.
   These equivalents let the prototype work without WordPress.
   -------------------------  */

/* Flex row — mirrors WordPress group with is-layout-flex */
.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--xxs);
    align-items: flex-start;
}

/* Row wrapper — provides the parent flex context for row-item-* classes.
   nowrap mirrors .wp-block-columns on desktop; row-item flex-basis values
   shrink to absorb the gap instead of wrapping. Stacking below 900px is
   handled in style.css. */
.row-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--md);
}

/* Vertical stack — mirrors WordPress group with is-layout-flow */
.stack {
    display: flex;
    flex-direction: column;
}

/* Inline flex helpers */
.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* Button group */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--ms);
    align-items: center;
}

/* Image placeholder — for prototyping before real images are placed */
.img-placeholder {
    background-color: var(--wp--preset--color--pale-grey);
    width: 100%;
    display: block;
}

.img-placeholder--hero {
    aspect-ratio: 4 / 3;
    border-radius: 24px;
}

.img-placeholder--card {
    aspect-ratio: 4 / 3;
}

.img-placeholder--wide {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
}

/* Feature card (prototype) */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--ms);
}

.feature-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--wp--preset--color--lemon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-card__icon svg {
    width: 24px;
    height: 24px;
}