/*
 * Design tokens — the single source of truth for the public, portal, admin and
 * auth surfaces. Change brand colours, type and spacing here and nowhere else.
 *
 * Brand: Go Green Gold = deep green (energy, growth, land) + warm gold
 * (harvest, opportunity). Neutral ink is green-tinted so the palette stays
 * cohesive instead of "green + grey".
 *
 * Fonts are self-hosted under public/assets/fonts/ so no request leaves for a
 * third-party stylesheet before first paint. The stack below is the fallback
 * while the WOFF2 arrives, so layout never jumps hard.
 */

/* Montserrat (public site) - one variable file covers 300-800. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/montserrat-latin-300-800.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins (auth + portal + admin) - the weights the application UI uses. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Brand green scale */
    --gg-green-50:  #ecfdf3;
    --gg-green-100: #d2f7e2;
    --gg-green-200: #a8eec9;
    --gg-green-300: #6fdfa8;
    --gg-green-400: #39c985;
    --gg-green-500: #15af6a;
    --gg-green-600: #0b8e56;
    --gg-green-700: #0a7247;
    --gg-green-800: #0c5a3a;
    --gg-green-900: #0b4a31;
    --gg-green-950: #05291b;

    /* Brand gold / amber accent scale */
    --gg-gold-50:  #fffbeb;
    --gg-gold-100: #fef3c7;
    --gg-gold-200: #fde68a;
    --gg-gold-300: #fcd34d;
    --gg-gold-400: #fbbf24;
    --gg-gold-500: #f59e0b;
    --gg-gold-600: #d97706;
    --gg-gold-700: #b45309;
    --gg-gold-800: #92400e;
    --gg-gold-900: #78350f;

    /* Green-tinted neutrals */
    --gg-ink-900: #0d1712;
    --gg-ink-800: #16231c;
    --gg-ink-700: #24332a;
    --gg-ink-600: #3a4c41;
    --gg-ink-500: #52655a;
    --gg-ink-400: #74877b;
    --gg-ink-300: #9fb0a6;
    --gg-ink-200: #c9d4cd;
    --gg-ink-100: #e4ebe7;
    --gg-ink-50:  #f4f7f5;

    /* Semantic aliases */
    --gg-primary:        var(--gg-green-600);
    --gg-primary-strong: var(--gg-green-800);
    --gg-accent:         var(--gg-gold-500);
    --gg-accent-strong:  var(--gg-gold-600);
    --gg-danger:         #b42318;
    --gg-success:        var(--gg-green-600);

    --gg-surface:     #ffffff;
    --gg-surface-alt: var(--gg-ink-50);

    /* The band behind alternating PUBLIC sections.
     *
     * Deliberately not --gg-surface-alt: that one paints the admin and portal
     * page backgrounds, where the contrast against a white card is the whole
     * point. Here the opposite is wanted. The home page alternates white and
     * band on nearly every section, and at --gg-ink-50 that reads as stripes
     * rather than as one page. This is a whisper — enough to separate a
     * section, not enough to be a colour. */
    --gg-surface-band: #fafcfb;
    --gg-border:      var(--gg-ink-200);
    --gg-ink:         var(--gg-ink-900);
    --gg-ink-muted:   var(--gg-ink-500);
    --gg-ink-soft:    var(--gg-ink-400);

    /* Typography
     * Montserrat throughout the public site, display and body alike — it is
     * what the reference site the client chose uses, and one geometric face
     * at two weights reads calmer than a display/body pairing. Both fall back
     * to the system UI stack, so a failed webfont is a texture change, not a
     * layout jump. */
    --gg-font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --gg-font:         "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Application UI — sign-in, registration, the admin portal and the student
       portal — uses Poppins, the face from the shop reference the client
       picked (A12). Those layouts opt in by setting
       --gg-font/--gg-font-display to it on :root (see auth.css, admin.css and
       portal.css). The public site keeps Montserrat above. */
    --gg-font-ui:      "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Type scale (mobile-first; headings scale up with clamp).
     *
     *   xs   labels, badges, captions, table headers        (12px — the floor)
     *   sm   secondary copy, card text, nav, footer links   (14px)
     *   base body copy                                      (16px)
     *   lg   leads and intros                               (18px)
     *   xl–4xl sub-headings and card titles
     *   5xl–6xl rarely used directly; display-1/2 (clamp) cover h1/h2
     *
     * Nothing on the site renders below xs: component styles must pick a
     * token here rather than hardcode a smaller value. */
    /* ---------------------------------------------------------------------
     * THE SPLIT THAT MATTERS: labels stay small, SENTENCES do not.
     *
     * Measured across the home page, prose was landing at 14px (card text,
     * blog excerpts, footer notes, captions) and 15.2px (outcome cards,
     * product blurbs). Both read as fine print on a 1440px screen. Eyebrows,
     * chips and the utility bar were ALSO 14px — and those are right, because
     * they are labels, not something anyone reads a sentence of.
     *
     * So the two were pulled apart rather than scaled together:
     *   sm   stays 14px  — eyebrows, chips, badges, table labels
     *   card goes to 16px — any sentence inside a card
     *   base goes to 17px — body copy, the reading size of the site
     *
     * Raising `sm` instead would have inflated every badge on the site to fix
     * a paragraph.
     * ------------------------------------------------------------------ */
    --gg-text-xs:   0.8125rem;   /* 13px — fine print, never a sentence */
    --gg-text-sm:   0.875rem;    /* 14px — LABELS: eyebrows, chips, badges */
    --gg-text-card: 1rem;        /* 16px — prose inside a card */
    --gg-text-base: 1.0625rem;   /* 17px — body copy */
    --gg-text-lg:   1.1875rem;   /* 19px — leads and intros */
    --gg-text-xl:   1.3125rem;   /* 21px — card titles */
    --gg-text-2xl:  1.625rem;    /* 26px */
    --gg-text-3xl:  2rem;        /* 32px */
    --gg-text-4xl:  2.5rem;      /* 40px */
    --gg-text-5xl:  3rem;
    --gg-text-6xl:  3.75rem;

    /* Fluid display sizes */
    /* Display sizes, brought down to the reference site's restraint.
     *
     * Measured against it at the same viewport: their section h2 is 24px and
     * their hero 28px, where ours were 32.6px and 33.4px. Big headings set
     * LIGHT is what made the page feel shouty and busy; the reference goes
     * smaller and bolder, which reads more confident. The weight change is in
     * base.css, next to the sizes it applies to. */
    --gg-display-1: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem); /* hero h1 */
    --gg-display-2: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);  /* section h2 */

    /* Spacing scale */
    --gg-space-1: 0.25rem;
    --gg-space-2: 0.5rem;
    --gg-space-3: 0.75rem;
    --gg-space-4: 1rem;
    --gg-space-5: 1.5rem;
    --gg-space-6: 2rem;
    --gg-space-7: 3rem;
    --gg-space-8: 4rem;
    --gg-space-9: 6rem;

    /* Radii */
    /* Radii.
     *
     * -lg is the card radius, and it is a TOKEN on purpose: every card on the
     * public site resolves through it, so the softer, rounder look taken from
     * the reference site the client chose lands on all nineteen pages at once
     * rather than being typed into nineteen templates.
     *
     * -md was referenced by three components before it existed, which made
     * their border-radius invalid at computed-value time — they rendered with
     * square corners. Defining it fixes those without touching them. */
    --gg-radius-sm:   0.375rem;
    --gg-radius:      0.625rem;
    --gg-radius-md:   0.8rem;
    --gg-radius-lg:   1.25rem;   /* 20px */
    --gg-radius-xl:   1.75rem;
    --gg-radius-full: 999px;

    /* Elevation */
    --gg-shadow-sm: 0 1px 2px rgba(13, 23, 18, 0.06);
    --gg-shadow:    0 6px 24px -6px rgba(13, 23, 18, 0.18);
    --gg-shadow-lg: 0 20px 50px -12px rgba(13, 23, 18, 0.28);

    /* Layout */
    --gg-container: 76rem;
    --gg-gutter:    clamp(1rem, 4vw, 2rem);
    --gg-focus:     3px solid var(--gg-accent);
    --gg-header-h:  4.5rem;

    /* Motion */
    --gg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gg-speed: 180ms;
}