/* ==========================================================================
   Ag360 — design tokens
   Single source of truth for colour, type, spacing and motion.
   This file is the lift-and-shift surface for the WordPress theme: porting the
   site means porting this file plus the template parts, not restyling.
   ========================================================================== */

:root {
  /* ---- Brand palette (from the client brand doc / PRD section 2) ---------
     Usage lock, applied site-wide:
       green = ACTION. Every primary CTA, and emphasised words in headlines.
       blue  = a panel fill and the ring mark. Never an action.
     No colour outside this palette appears on the site. */
  --ag-blue:          #1E40AF;   /* Primary Blue  - Deep sky blue */
  --ag-green:         #16A34A;   /* Primary Green - Verdant green */
  --ag-navy:          #001887;   /* Secondary blue - Navy field */
  --ag-forest:        #008540;   /* Secondary green - Forest green */
  --ag-blue-light:    #5A7CEB;   /* Tertiary blue - Cloud blue */
  --ag-green-light:   #48D586;   /* Tertiary green - Mint green */
  --ink:              #0B1420;   /* Body text */
  --paper:            #F3F6F4;   /* Page ground */

  /* ---- Support neutrals --------------------------------------------------
     Green-grey darks for the page ground. The single warm value is --bone,
     declared further down; there is no terracotta, brass or ochre anywhere. */
  --canopy:           #0C2A1C;   /* Deep green-black: dark bands, footer, scrims */
  --canopy-soft:      #14382A;   /* One step up from canopy, for layering */
  --field:            #E4EAE4;   /* One step under paper: quiet alternating bands */
  --stone:            #6B7A72;   /* Muted green-grey: secondary text, hairlines */
  --stone-dark:       #4A574F;   /* Secondary text that must pass AA on paper */

  /* ---- Semantic assignments --------------------------------------------- */
  --bg:               var(--paper);
  --bg-alt:           var(--field);
  --bg-invert:        var(--canopy);
  --text:             var(--ink);
  --text-muted:       var(--stone-dark);
  --text-on-invert:   #EAF1EC;
  --text-muted-invert: #A9BFB2;
  --rule:             rgba(107, 122, 114, 0.22);
  --rule-invert:      rgba(234, 241, 236, 0.18);
  --focus:            var(--ag-blue);

  /* ---- Type -------------------------------------------------------------
     Display and body are both Inter: display is Inter 800 set in caps, which
     is what carries the poster weight of this design. Data is IBM Plex Mono,
     reserved for dates, prices, seat counts and the countdown; never for
     decorative labels.
     --font-display is retained only so the Newsreader files stay wired up if
     the serif is ever reinstated. Nothing currently references it. */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale. Clamps are tuned so the hero headline holds 2 lines at
     desktop and 3 at 390px without the font-size collapsing. */
  --t-display: clamp(2.75rem, 1.6rem + 4.9vw, 5.25rem);
  --t-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --t-h2:      clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
  --t-lead:    clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;

  --lh-display: 1.06;
  --lh-heading: 1.14;
  --lh-body:    1.65;

  /* ---- Space (4px base) -------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --measure:   68ch;

  /* ---- Shape ------------------------------------------------------------
     Panels are 20px, cards and images 16px, buttons and labels are full
     pills. --radius is the legacy 4px value, kept only for form inputs. */
  --radius: 4px;

  /* ---- Layout ------------------------------------------------------------ */
  --wrap:       1240px;
  --wrap-text:  760px;
  --nav-h:      72px;

  /* ---- Motion -----------------------------------------------------------
     Motion is deliberately sparse: sections reveal once on scroll and the
     countdown counts. Nothing loops forever. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  900ms;

  /* ---- Layers ------------------------------------------------------------ */
  --z-nav: 100;
  --z-menu: 110;

  /* ======================================================================
     COLOUR-BLOCK LANGUAGE (every page)
     A deep green page ground carrying large flat panels of brand colour and
     a warm neutral, with photography in nearly every section. The brand hues
     are unchanged; what changes is how much surface they cover.
     ====================================================================== */

  /* Warm neutral. The one warm value in the system: it exists so the blue
     and green panels have something to sit against without the page going
     cold. It is a neutral ground, never an accent. */
  --bone:        #F4F0E6;
  --bone-deep:   #E8E2D2;

  /* Panel fills, rotated section by section. */
  --panel-green: var(--ag-green);
  --panel-blue:  var(--ag-blue);
  --panel-mint:  var(--ag-green-light);
  --panel-navy:  var(--ag-navy);
  --panel-bone:  var(--bone);

  /* Larger, softer geometry than the editorial pages use. */
  --radius-panel: 20px;
  --radius-card:  16px;
  --radius-pill:  999px;

  --shadow-panel: 0 18px 44px rgba(6, 26, 16, 0.28);

  /* Secondary Green is tuned to carry white button text; as small green TEXT
     on a light ground it only reaches 4.17:1. This darker cut is for that
     job, and clears AA at any size. */
  --green-text: #006B34;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}