/* ============================================================
   GRAND FUN GP — DESIGN TOKENS v1.1 (WordPress, FROZEN)
   Three-tier architecture: Primitive -> Semantic -> Component
   D0 decision 2026-07-20: EMERALD primary actions (white text),
   LIME is the bright accent (badges, chips, underlines, washes).
   Enqueue FIRST in the theme (see functions-enqueue.php).
   Components/templates reference Tier 3 or Tier 2 only — never Tier 1,
   never raw hex.

   NOTE: hex values are provisional, carried from the prior palette and
   reordered green-first. Confirm against the official GrandFunGP brand
   guide before they harden. Because of the tier structure, swapping the
   primitives later updates the entire UI with no component edits.
   ============================================================ */

:root {

  /* ==========================================================
     TIER 1 — PRIMITIVES
     ========================================================== */

  /* Green — PRIMARY
     Two-tone system inspired by The High Line:
     - Deep emerald carries the brand (buttons, headers, footer, dark bands).
       Reads strong on white, dark text never needed, AAA contrast with white.
     - City lime #afc439 is the bright accent / highlight (chips, underlines,
       hover washes, marker dots) — Parks-Arts-Rec logo green. */
  --gp-emerald-900: #053524;  /* near-black emerald, deep surfaces */
  --gp-emerald-800: #0a4a32;  /* hover/active for primary */
  --gp-emerald-700: #0d5c3d;  /* PRIMARY action (white text, ~10.6:1) */
  --gp-emerald-600: #15764d;  /* lighter emerald, secondary surfaces */
  --gp-emerald-100: rgba(13, 92, 61, 0.10);

  /* Lime — ACCENT (official City of Grand Prairie #afc439) */
  --gp-lime-700:    #7d8c1f;
  --gp-lime-600:    #98a82c;
  --gp-lime-500:    #afc439;  /* the city hex — accent, never a button bg with white text */
  --gp-lime-100:    rgba(175, 196, 57, 0.18);
  --gp-lime-050:    rgba(175, 196, 57, 0.08);

  /* Back-compat aliases (existing components reference --gp-green-*) */
  --gp-green-700:   var(--gp-emerald-800);
  --gp-green-600:   var(--gp-emerald-800);
  --gp-green-500:   var(--gp-emerald-700);
  --gp-green-100:   var(--gp-emerald-100);
  --gp-green-050:   var(--gp-lime-050);

  /* Gold — SECONDARY (retained for civic accents / Fred ring) */
  --gp-gold-600: #D99800;
  --gp-gold-500: #F0AA00;
  --gp-gold-100: rgba(240, 170, 0, 0.14);

  /* Blue — TERTIARY (links / info only) */
  --gp-blue-600: #105488;
  --gp-blue-500: #1464A0;
  --gp-blue-100: rgba(20, 100, 160, 0.12);

  /* Neutrals — derived from official #333333 grey + true black/white */
  --gp-neutral-900: #000000;
  --gp-neutral-800: #1a1a1a;
  --gp-neutral-700: #333333;
  --gp-neutral-500: #666666;
  --gp-neutral-400: #767676; /* AA-compliant muted text on white (4.54:1) */
  --gp-neutral-200: #e5e5e5;
  --gp-neutral-100: #f4f4f4;
  --gp-neutral-050: #fafafa;
  --gp-white:       #FFFFFF;

  /* Status */
  --gp-success-500: #2E8B4F;
  --gp-warning-500: #E8A317;
  --gp-error-500:   #D14343;
  --gp-success-100: rgba(46, 139, 79, 0.12);
  --gp-warning-100: rgba(232, 163, 23, 0.14);
  --gp-error-100:   rgba(209, 67, 67, 0.12);

  /* Event category palette (chips, park badges, map markers)
     Distinct hues across the wheel. NOTE: needs a distinctness/contrast
     pass and must map to how the city actually classifies programs. */
  --gp-cat-aquatics:  #0E9CB8;
  --gp-cat-athletics: #E2553B;
  --gp-cat-arts:      #8E5BC4;
  --gp-cat-nature:    #4E944F;
  --gp-cat-golf:      #7E8B2E;
  --gp-cat-festival:  #D6336C;
  --gp-cat-family:    #F2820B;
  --gp-cat-seniors:   #3F6CC4;


  /* ==========================================================
     TIER 2 — SEMANTIC (the layer the UI reads; the only layer a
     subdomain/property theme override needs to touch)
     ========================================================== */

  /* Actions — FROZEN (D0: option 1b): emerald primary, lime accent */
  --color-action-primary:         var(--gp-emerald-700); /* white text, 10.6:1 */
  --color-action-primary-hover:   var(--gp-emerald-800);
  --color-action-primary-active:  var(--gp-emerald-900);
  --color-action-secondary:       var(--gp-gold-500);   /* needs dark text */
  --color-action-secondary-hover: var(--gp-gold-600);
  --color-action-tertiary:        var(--gp-blue-500);
  --color-action-accent:          var(--gp-lime-500);   /* lime bright accent */
  --color-action-accent-hover:    var(--gp-lime-600);

  /* Backgrounds */
  --color-bg-page:         var(--gp-neutral-100);
  --color-bg-surface:      var(--gp-white);
  --color-bg-surface-raised: var(--gp-neutral-050);
  --color-bg-inverse:      var(--gp-emerald-900); /* deep emerald footer / dark bands */
  --color-bg-overlay:      var(--gp-emerald-900); /* full-bleed hero scrim */
  --color-bg-tint-primary: var(--gp-lime-100);
  --color-bg-tint-accent:  var(--gp-emerald-100);

  /* Text */
  --color-text-primary:   var(--gp-neutral-900);
  --color-text-secondary: var(--gp-neutral-500);
  --color-text-muted:     var(--gp-neutral-400);
  --color-text-inverse:   var(--gp-white);
  --color-text-accent:    var(--gp-emerald-700);
  --color-text-link:      var(--gp-emerald-700);
  --color-text-on-primary:   var(--gp-white);        /* white on emerald (10.6:1) */
  --color-text-on-accent:    var(--gp-white);        /* white on emerald */
  --color-text-on-secondary: var(--gp-neutral-900);  /* on gold */

  /* Borders */
  --color-border-default: var(--gp-neutral-200);
  --color-border-strong:  var(--gp-neutral-400);
  --color-border-focus:   var(--gp-green-500);

  /* Status */
  --color-status-success:      var(--gp-success-500);
  --color-status-success-tint: var(--gp-success-100);
  --color-status-warning:      var(--gp-warning-500);
  --color-status-warning-tint: var(--gp-warning-100);
  --color-status-error:        var(--gp-error-500);
  --color-status-error-tint:   var(--gp-error-100);
  --color-status-info:         var(--gp-blue-500);
  --color-status-info-tint:    var(--gp-blue-100);

  /* Event categories (semantic passthrough so UI never reads primitives) */
  --color-category-aquatics:  var(--gp-cat-aquatics);
  --color-category-athletics: var(--gp-cat-athletics);
  --color-category-arts:      var(--gp-cat-arts);
  --color-category-nature:    var(--gp-cat-nature);
  --color-category-golf:      var(--gp-cat-golf);
  --color-category-festival:  var(--gp-cat-festival);
  --color-category-family:    var(--gp-cat-family);
  --color-category-seniors:   var(--gp-cat-seniors);


  /* ==========================================================
     TIER 3 — COMPONENT
     ========================================================== */

  /* Buttons */
  --btn-primary-bg:        var(--color-action-primary);
  --btn-primary-bg-hover:  var(--color-action-primary-hover);
  --btn-primary-bg-active: var(--color-action-primary-active);
  --btn-primary-text:      var(--color-text-on-primary);

  --btn-secondary-bg:       var(--color-action-secondary);
  --btn-secondary-bg-hover: var(--color-action-secondary-hover);
  --btn-secondary-text:     var(--color-text-on-secondary);

  --btn-ghost-border:   var(--color-border-default);
  --btn-ghost-text:     var(--color-text-primary);
  --btn-ghost-bg-hover: var(--color-bg-tint-primary);

  /* Cards (park cards, event cards, attraction cards)
     High Line pattern: white card, thin top/side rule + small badge in the
     lime accent, large editorial date/title in emerald or near-black. */
  --card-bg:           var(--color-bg-surface);
  --card-border:       var(--color-border-default);
  --card-shadow:       var(--shadow-md);
  --card-radius:       var(--radius-lg);
  --card-accent:       var(--gp-lime-500);           /* lime accent bar / badge fill */
  --card-accent-text:  var(--gp-neutral-900);        /* dark text on lime badge */
  --card-accent-tint:  var(--gp-lime-100);           /* hover wash / category strip */
  --card-title:        var(--gp-emerald-700);        /* emerald headline link */
  --card-meta:         var(--color-text-secondary);

  /* Header / nav */
  --nav-bg:            var(--color-bg-surface);
  --nav-text:          var(--color-text-primary);
  --nav-text-hover:    var(--color-action-primary);
  --nav-megamenu-bg:   var(--color-bg-surface);
  --nav-utility-bg:    var(--color-bg-inverse);
  --nav-utility-text:  var(--color-text-inverse);

  /* Park-finder filter chips */
  --filter-chip-bg:          var(--color-bg-surface);
  --filter-chip-border:      var(--color-border-default);
  --filter-chip-text:        var(--color-text-secondary);
  --filter-chip-active-bg:   var(--color-bg-tint-primary);
  --filter-chip-active-text: var(--color-action-primary);
  --filter-chip-active-border: var(--color-action-primary);

  /* Calendar category chip: bind --cat to a category token per event,
     e.g. style="--cat: var(--color-category-aquatics)" */
  --cal-chip-bar:  var(--cat, var(--color-action-primary));
  --cal-chip-bg:   color-mix(in srgb, var(--cat, var(--color-action-primary)) 12%, white);
  --cal-chip-text: var(--color-text-primary);
  --cal-date-number: var(--color-text-primary); /* High Line large date numerals */

  /* Map marker */
  --marker-fill:   var(--cat, var(--color-action-primary));
  --marker-stroke: var(--gp-white);

  /* Inputs */
  --input-bg:          var(--color-bg-surface);
  --input-border:      var(--color-border-default);
  --input-text:        var(--color-text-primary);
  --input-placeholder: var(--color-text-muted);
  --input-focus-ring:  var(--color-border-focus);

  /* FRED — persistent assistant placeholder (every page)
     Defaults to civic green so Fred reads native. Fred's own brand accent
     can override these without touching anything else. */
  --fred-launcher-bg:    var(--color-action-primary);
  --fred-launcher-icon:  var(--color-text-on-primary);
  --fred-launcher-ring:  var(--gp-gold-500);     /* gold attention ring */
  --fred-panel-bg:       var(--color-bg-surface);
  --fred-panel-header-bg: var(--color-action-primary);
  --fred-panel-header-text: var(--color-text-on-primary);
  --fred-panel-text:     var(--color-text-primary);
  --fred-bubble-user-bg: var(--color-bg-tint-primary);
  --fred-bubble-fred-bg: var(--gp-neutral-050);
  --fred-accent:         var(--gp-gold-500);


  /* ==========================================================
     FOUNDATION
     ========================================================== */

  /* Spacing — 4px base, 8px grid */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;
  --container-max: 1280px;
  --container-wide: 1600px; /* full-width calendar + map */

  /* Radius — civic, restrained */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(27, 29, 28, 0.06);
  --shadow-md: 0 4px 14px rgba(27, 29, 28, 0.08);
  --shadow-lg: 0 14px 36px rgba(27, 29, 28, 0.12);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Typography — Inter primary, Playfair Display Italic editorial */
  --font-body:      'Inter', system-ui, sans-serif;
  --font-display:   'Inter', system-ui, sans-serif;
  --font-editorial: 'Playfair Display', Georgia, serif;

  --text-hero:    clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --text-h1:      clamp(2rem, 3vw + 0.75rem, 3.25rem);
  --text-h2:      clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --text-h3:      clamp(1.25rem, 1vw + 0.75rem, 1.6rem);
  --text-date:    clamp(2rem, 2.5vw + 1rem, 3.5rem); /* High Line date numerals */
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-sm:      1.0625rem; /* 17px ADA floor */
  --text-xs:      1.0625rem; /* 17px ADA floor (was 12px) */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.65;
  --tracking-tight: -0.02em;
  --tracking-label: 0.14em;
}


/* ============================================================
   PROPERTY / SUBDOMAIN THEMES (multi-tenant)
   Each rec center brought inside the framework
   (charleytaylor.grandfungp.com, summit.grandfungp.com, etc.)
   is a Tier-2 override on a [data-property] wrapper. Scaffolding only;
   tune each to the rec center's identity.
   ============================================================ */

[data-property="charley-taylor"] {
  --color-action-primary:       var(--gp-blue-500);
  --color-action-primary-hover: var(--gp-blue-600);
  --color-bg-tint-primary:      var(--gp-blue-100);
  --color-text-accent:          var(--gp-blue-600);
  --color-border-focus:         var(--gp-blue-500);
}

[data-property="summit"] {
  /* 50+ Summit fitness — calmer, gold-forward */
  --color-action-primary:       var(--gp-gold-600);
  --color-action-primary-hover: #B87E00;
  --color-bg-tint-primary:      var(--gp-gold-100);
  --color-text-on-primary:      var(--gp-neutral-900);
  --color-text-accent:          var(--gp-gold-600);
  --color-border-focus:         var(--gp-gold-500);
}

[data-property="shotwell"] {
  --color-action-primary:       var(--gp-green-600);
  --color-action-primary-hover: var(--gp-green-700);
}


/* ============================================================
   TIER-3 RE-RESOLUTION under scoped Tier-2 overrides.
   Custom properties substitute their var() refs at the element
   where they are DECLARED — the :root Tier-3 aliases therefore
   freeze to the default palette and would ignore [data-property]
   / [data-surface] Tier-2 overrides. Re-declaring the affected
   aliases on the scope makes them recompute there. Add any new
   Tier-3 alias that reads an overridable Tier-2 token here too.
   ============================================================ */
[data-property], [data-surface="dark"] {
  --btn-primary-bg:        var(--color-action-primary);
  --btn-primary-bg-hover:  var(--color-action-primary-hover);
  --btn-primary-bg-active: var(--color-action-primary-active);
  --btn-primary-text:      var(--color-text-on-primary);
  --btn-ghost-border:      var(--color-border-default);
  --btn-ghost-text:        var(--color-text-primary);
  --btn-ghost-bg-hover:    var(--color-bg-tint-primary);
  --card-bg:               var(--color-bg-surface);
  --card-border:           var(--color-border-default);
  --card-meta:             var(--color-text-secondary);
  --nav-text-hover:        var(--color-action-primary);
  --filter-chip-bg:        var(--color-bg-surface);
  --filter-chip-border:    var(--color-border-default);
  --filter-chip-text:      var(--color-text-secondary);
  --filter-chip-active-bg:   var(--color-bg-tint-primary);
  --filter-chip-active-text: var(--color-action-primary);
  --filter-chip-active-border: var(--color-action-primary);
  --input-bg:              var(--color-bg-surface);
  --input-border:          var(--color-border-default);
  --input-text:            var(--color-text-primary);
  --input-focus-ring:      var(--color-border-focus);
  --fred-launcher-bg:      var(--color-action-primary);
  --fred-launcher-icon:    var(--color-text-on-primary);
  --fred-panel-header-bg:  var(--color-action-primary);
  --fred-panel-header-text: var(--color-text-on-primary);
  --fred-bubble-user-bg:   var(--color-bg-tint-primary);
}


/* ============================================================
   CONTEXTUAL INVERSE — content on dark (hero scrim, footer)
   ============================================================ */
[data-surface="dark"] {
  --color-text-primary:   var(--gp-white);
  --color-text-secondary: var(--gp-neutral-400);
  --color-border-default: var(--gp-neutral-700);
  --color-bg-surface:     var(--gp-neutral-800);
}