/*
 * Colour tokens — mirrors the Figma "Mode 1" variable collection 1:1
 * (names/values from the exported tokens.json). Consumed by main.css,
 * header.css, grid.css. Loaded first so every other stylesheet can use
 * these custom properties.
 *
 * Figma doesn't export gradients as variables (they're Paint Styles), so
 * the brand gradient stop #1D3424 used in main.css isn't tokenized here —
 * only the flat colours below came from the export.
 */
:root{
    --white: #FFFFFF;
    --black: #000000;
    --off-white: #F5F5F5;
    --grey: #DDDDDD;
    --silver: #eaeceb;

    --transparent-dark-20: rgba(0, 0, 0, 0.2);
    --transparent-light-8: rgba(255, 255, 255, 0.08);
    --transparent-light-12: rgba(255, 255, 255, 0.12);
    --transparent-light-50: rgba(255, 255, 255, 0.5);
    --transparent-light-80: rgba(255, 255, 255, 0.8);

    --green-aztec: #0F1F14;
    --green-aztec-80: rgba(15, 31, 20, 0.8);
    --green-aztec-70: rgba(15, 31, 20, 0.7);
    --green-aztec-60: rgba(15, 31, 20, 0.6);
    --green-aztec-40: rgba(15, 31, 20, 0.4);
    --green-aztec-20: rgba(15, 31, 20, 0.2);
    --green-country: #456D4E;
    --green-zombie-grey: #5C655E;

    --rose-beige: #BA9392;
    --blue-iceberg: #779ED4;

    /* Not in the Figma export — the other stop(s) the gradients below need.
       Named to match the "aztec" family since they're the same green family. */
    --green-forest: #1D3424;
    --green-forest-70: rgba(29, 52, 36, 0.7);
    --green-onyx: #080A09;
    --green-moss: #2B3E32;
    --transparent-light-60: rgba(255, 255, 255, 0.6);

    /* Hover steps for the translucent button skins — one rung up from the
       .btn-transparent tints, with no export value close enough to reuse. */
    --transparent-light-24: rgba(255, 255, 255, 0.24);
    --transparent-dark-40: rgba(0, 0, 0, 0.4);

    /* PRIMITIVES — one t-shirt spacing scale, the whole vocabulary for padding
       and margin. rem (root is the unmodified 16px browser default, so
       1rem = 16px) so a step means the same size everywhere, whatever the
       font-size of the element it lands on.

       Every step drops at 991px (see the media-scoped :root below) — desktop
       spacing is too generous on a phone, and compressing the scale itself
       means every .p-x and .m-x in the markup responds with no per-element
       override. The mobile values reuse these same names, so nothing that
       consumes a token needs to know the breakpoint exists. */
    --padding-none: 0;
    --padding-xs:  .5rem;    /*  8px */
    --padding-sm:  1rem;     /* 16px */
    --padding-md:  1.5rem;   /* 24px */
    --padding-lg:  2rem;     /* 32px */
    --padding-xl:  3rem;     /* 48px */
    --padding-2xl: 4rem;     /* 64px */
    --padding-3xl: 5rem;     /* 80px */
    --padding-4xl: 6rem;     /* 96px */

    /* SEMANTIC — named for the role rather than the size, and composed from the
       primitives so they inherit the mobile compression for free. Point a new
       one at a primitive rather than a raw value; only re-point it in the
       breakpoint below when the role needs a different step than its desktop
       one, not merely a smaller number. */
    --padding-card: var(--padding-md);   /* card + FAQ row surfaces */
    --padding-section: 250px;            /* px, not rem — deliberate exception */

    /* Height of the site header. The header stays in flow and .site-content
       is pulled up over it by exactly this much — see main.css. */
    --header-height: 65px;

    /* RADIUS — the corner scale, pulled from what main.css already used. rem
       to match the spacing scale, so the nesting formula in utilities.css can
       add the two together without mixing units. */
    --radius-none: 0;
    --radius-xs:  .75rem;    /* 12px */
    --radius-sm:  .875rem;   /* 14px */
    --radius-md:  1.5rem;    /* 24px */
    --radius-lg:  2.5rem;    /* 40px */
    --radius-xl:  3.125rem;  /* 50px */
    --radius-2xl: 3.75rem;   /* 60px */
    --radius-3xl: 5rem;      /* 80px */

    /* Shape aliases — a role, not a step. --radius-pill is the same 50px as
       --radius-xl but says why: on a ~60px control it reads as a full pill. */
    --radius-pill: var(--radius-xl);
    --radius-circle: 50%;
}

/*
 * Responsive spacing overrides — same token names as the base scale above,
 * redefined inside the breakpoint so every consumer picks up the mobile
 * value automatically. Breakpoint matches .section-padding's own ≤991px
 * step in main.css.
 */
@media (max-width: 991px) {
    :root{
        /* Each step compresses by roughly one rung. xs is the exception — it
           holds at 8px, since half of that is too fine to read as spacing. */
        --padding-sm:  .75rem;   /* 16px -> 12px */
        --padding-md:  1rem;     /* 24px -> 16px */
        --padding-lg:  1.5rem;   /* 32px -> 24px */
        --padding-xl:  2rem;     /* 48px -> 32px */
        --padding-2xl: 2.5rem;   /* 64px -> 40px */
        --padding-3xl: 3rem;     /* 80px -> 48px */
        --padding-4xl: 3.5rem;   /* 96px -> 56px */

        /* Lands on 12px, the value the FAQ rows already shipped with — now a
           step on the scale rather than the off-scale literal it used to be. */
        --padding-card: var(--padding-sm);
        --padding-section: 150px;

         --radius-xs:  .25rem;    /* 12px */
         --radius-sm:  .475rem;   /* 14px */
         --radius-md:  1rem;    /* 24px */
         --radius-lg:  2rem;    /* 40px */
         --radius-xl:  3rem;  /* 50px */
         --radius-2xl: 3.175rem;   /* 60px */
         --radius-3xl: 4rem;      /* 80px */
    }
}

/*
 * Gradients — composed from the colour tokens above. Figma stores these as
 * Paint Styles, not variables, so they were hand-copied from the design
 * rather than exported; named for what they visually do, not the class
 * that happens to consume them today.
 */
:root{
    /* Base brand gradient — .btn-green, and the dark base layer under
       .bg-gradient-dark-green's black-20 scrim. */
    --gradient-dark-green: linear-gradient(180deg, var(--green-aztec) 0%, var(--green-forest) 100%);

    /* Radial highlight over the base gradient — used behind the newsletter
       pill today; reusable anywhere that wants the same glow. */
    --gradient-dark-green-spotlight:
        radial-gradient(65.49% 50% at 41.83% -0.04%, var(--green-onyx) 0%, var(--green-moss) 100%),
        var(--gradient-dark-green);

    /* Diagonal fade from solid to 80%/40% — .text-gradient-dark-green-smooth /
       .text-gradient-dark-green (the clipped-text headline treatments). */
    --gradient-dark-green-fade-80: linear-gradient(180.93deg, var(--green-aztec) 20.06%, var(--green-aztec-80) 99.29%);
    --gradient-dark-green-fade-60: linear-gradient(180.93deg, var(--green-aztec) 20.06%, var(--green-aztec-60) 99.29%);
    --gradient-dark-green-fade-40: linear-gradient(180.93deg, var(--green-aztec) 20.06%, var(--green-aztec-40) 99.29%);

    /* The base brand gradient held at 70% opacity throughout — .bg-gradient-dark-green-70. */
    --gradient-dark-green-70: linear-gradient(180deg, var(--green-aztec-70) 0%, var(--green-forest-70) 100%);

    /* White fading to 60%-opacity white — .text-gradient-white-green. */
    --gradient-white-fade-60: linear-gradient(180deg, var(--white) 19.5%, var(--transparent-light-60) 85%);
}