/* ==========================================================================
   Trafalgar Park Community Hub — design tokens
   Single source of truth for the website. Same values become the Elementor
   Globals (see ../tokens/elementor-globals.md) and, later, pan-site-base CSS.

   Palette source: brand-kit/brand-and-social-starter.md + design-system-spec.md
   Status: WORKING palette — Sage & Oak direction pending committee confirmation.
   A palette change is a token swap here, not a redesign.

   Slug names are chosen to survive a future move to theme.json presets
   (e.g. --hub-green  ->  --wp--preset--color--hub-green).
   ========================================================================== */

:root {
  /* --- Brand colour (locked 7) ------------------------------------------ */
  --hub-green:    #2E6B4F;  /* primary            */
  --deep-green:   #24543E;  /* depth / dark bg    */
  --fresh-green:  #7FB069;  /* highlight — BG ONLY, never text on cream */
  --warm-amber:   #E8A33D;  /* CTA only — pair with charcoal text */
  --clay:         #C96E4A;  /* accent — large text only */
  --cream:        #F7F2E9;  /* default background */
  --charcoal:     #2B2B2B;  /* body text          */

  /* --- Derived functional tones (NOT brand — adjust freely) -------------- */
  --cream-deep:   #EFE7D8;  /* alternating section band on cream */
  --line:         #E0D7C6;  /* hairline borders, dividers        */
  --muted:        #5A5A5A;  /* captions, meta — 6.2:1 on cream   */
  --white:        #FFFFFF;  /* cards on cream                    */

  /* --- Semantic roles (use these in components) -------------------------- */
  --color-bg:            var(--cream);
  --color-bg-alt:        var(--cream-deep);
  --color-bg-invert:     var(--deep-green);
  --color-surface:       var(--white);
  --color-text:          var(--charcoal);
  --color-text-muted:    var(--muted);
  --color-text-invert:   var(--cream);
  --color-link:          var(--hub-green);
  --color-link-hover:    var(--deep-green);
  --color-cta-bg:        var(--warm-amber);
  --color-cta-text:      var(--charcoal); /* NEVER white — 2.2:1, fails */
  --color-border:        var(--line);
  --color-focus:         var(--deep-green);

  /* --- Type families ----------------------------------------------------- */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;
  /* Self-hosted woff2 only. Weights shipped: Poppins 600/700, Lato 400/700. */

  /* --- Type scale (desktop / tablet / mobile in the .md; fluid here) ------ */
  --step-h1:   clamp(2.125rem, 1.55rem + 2.4vw, 3rem);      /* 34 -> 48 */
  --step-h2:   clamp(1.75rem,  1.42rem + 1.4vw, 2.25rem);   /* 28 -> 36 */
  --step-h3:   clamp(1.375rem, 1.24rem + 0.55vw, 1.625rem); /* 22 -> 26 */
  --step-h4:   clamp(1.125rem, 1.07rem + 0.22vw, 1.25rem);  /* 18 -> 20 */
  --step-lead: clamp(1.1875rem,1.09rem + 0.38vw, 1.3125rem);/* 19 -> 21 */
  --step-body: clamp(1.0625rem,1.03rem + 0.14vw, 1.125rem); /* 17 -> 18 */
  --step-small: 0.9375rem;                                   /* 15       */

  --lh-tight: 1.15;
  --lh-head:  1.25;
  --lh-body:  1.65;

  --ls-head: -0.01em;
  --ls-btn:   0.02em;

  /* --- Spacing (8pt-ish) ------------------------------------------------- */
  --space-2xs: 0.25rem;  /*  4 */
  --space-xs:  0.5rem;   /*  8 */
  --space-sm:  0.75rem;  /* 12 */
  --space-md:  1rem;     /* 16 */
  --space-lg:  1.5rem;   /* 24 */
  --space-xl:  2rem;     /* 32 */
  --space-2xl: 3rem;     /* 48 */
  --space-3xl: 4rem;     /* 64 */
  --space-4xl: 6rem;     /* 96 — section padding, desktop */

  /* --- Layout ------------------------------------------------------------ */
  --container:        1140px;
  --container-narrow: 720px;  /* long-form text measure (~68ch) */
  --gutter:           var(--space-lg);

  /* --- Shape ------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:  12px;   /* cards */
  --radius-lg:  20px;   /* hero panels, image masks */
  --radius-pill: 999px; /* buttons */

  /* --- Elevation (soft, never corporate-glossy) -------------------------- */
  --shadow-sm: 0 1px 2px rgba(43, 43, 43, 0.06);
  --shadow-md: 0 4px 16px rgba(43, 43, 43, 0.08);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  180ms;
}

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

/* --------------------------------------------------------------------------
   Composition rules (from design-system-spec.md, extended by measured contrast)
   1. One accent per composition.
   2. Amber is for CTAs only — text on amber is CHARCOAL, never white (2.2:1).
   3. Fresh green is a background for dark text — never text on cream (2.3:1).
   4. Clay is a large-text / block accent only — 3.2:1 on cream.
   5. Text on green is cream, not white (brand rule; both pass contrast).
   6. Body text is 17–18px minimum: the audience skews older, and it is the
      cheapest accessibility win on the whole site.
   -------------------------------------------------------------------------- */