/*!
 * Gather Grove — Design Tokens v0.1
 *
 * Canonical CSS custom properties for the Gather Grove ecosystem.
 * Consumed by every GG plugin from `gather-grove-core/tokens/tokens.css`.
 *
 * Four-tier cascade for color and typography tokens:
 *   1. Per-plugin override (set in plugin CSS; e.g. Booking's Brand-tab
 *      StyleBridge :root injection)
 *   2. Gather Grove Brand Variable (Elementor 4 — free-core color/font
 *      Variables labeled --gg-brand-*; created by Booking's "Adopt my
 *      site brand" flow)
 *   3. Elementor classic global (--e-global-*) when Elementor is active
 *   4. Hardcoded Gather Grove default (Grove brand — deep forest green,
 *      sage, warm sand, cream; canonicalized to gathergrove.io, May 2026)
 *
 * Spacing, radius, shadow, duration, and easing tokens are hardcoded
 * (no Elementor fallback) — these are layout/motion primitives, not theme.
 *
 * Naming follows the categorized pattern documented in
 * ../docs/ecosystem-conventions.md §7.
 *
 * Values are starting points. Refine over time. When you change a value,
 * commit it here first (so every plugin picks it up on next pull).
 */

:root {
  /* ─────────────────────────────────────────────────────────────────
   * COLOR — Grove palette (default)
   * The 5 brand colors below cascade: --gg-brand-* Variable → Elementor
   * global → hardcoded default (plugin override via StyleBridge sits on top).
   * ───────────────────────────────────────────────────────────────── */

  /* Primary (deep forest green) */
  --gg-color-primary:         var(--gg-brand-primary,   var(--e-global-color-primary,    #254032));
  /* Derived, never fixed — a pale wash of the resolved primary (10% in white
     reproduces the old hardcoded #e8efe5 against Grove green, and matches
     Communities' PHP-side derive). This used to borrow Elementor's *secondary*
     global, which on most kits is a different hue entirely — so components
     pairing primary text with a primary-soft fill went tint-on-tint (e.g.
     coral text on a gold badge). Same rationale as primary-strong below. */
  --gg-color-primary-soft:    color-mix(in srgb, var(--gg-color-primary) 10%, #fff);
  /* Derived, never fixed. "primary-strong" means *primary, darker* — it drives
     button hover/active and dark accents, so it has to follow whatever
     --gg-color-primary actually resolved to. Hardcoding it meant a site whose
     Elementor kit set a primary got that colour on a button and Grove green on
     the same button's hover. Matches the ratio Courses already shipped. */
  --gg-color-primary-strong:  color-mix(in srgb, var(--gg-color-primary) 82%, #000);

  /* Secondary (sage) — the .io brand's second green. Distinct from the pale
     primary-soft tint; used for accent rules, soft fills, and gradients. */
  --gg-color-secondary:       var(--gg-brand-secondary, var(--e-global-color-secondary,  #8eb18c));

  /* Accent (warm sand) */
  --gg-color-accent:          var(--gg-brand-accent,    var(--e-global-color-accent,     #c4a484));
  /* Same story: a soft wash of the resolved accent, not a fixed sand. */
  --gg-color-accent-soft:     color-mix(in srgb, var(--gg-color-accent) 20%, #fff);

  /* Text */
  --gg-color-text:            var(--gg-brand-text,      var(--e-global-color-text,       #2c2a26));
  --gg-color-text-muted:      var(--gg-brand-text-muted,     #6b675f);
  --gg-color-text-inverse:                                     #fefaf7;

  /* Surface
     🚨 These carry a brand slot for the same reason every other colour does,
     and the omission was an invisibility bug rather than a missing nicety.
     --gg-color-text cascades off the studio's brand; --gg-color-surface did
     not. So a dark studio re-pointed its text to cream, every card stayed a
     fixed #ffffff, and cream-on-white made the account menu, the checkout
     inputs and the agreement box unreadable — the palette could describe the
     page but not the cards drawn on it. ⚠ The defaults are byte-identical, so
     no existing site moves; this only gives a dark brand somewhere to say so. */
  --gg-color-background:      var(--gg-brand-background, #fefaf7);
  --gg-color-surface:         var(--gg-brand-surface,        #ffffff);
  --gg-color-surface-raised:  var(--gg-brand-surface-raised, #ffffff);
  --gg-color-overlay:         var(--gg-brand-overlay,        rgba(28, 26, 22, 0.4));

  /* Border — same seam. A fixed warm sand reads as a bright scratch once the
     surface behind it goes dark, so it has to be able to follow too. */
  --gg-color-border:          var(--gg-brand-border,         #e8e3d8);
  --gg-color-border-strong:   var(--gg-brand-border-strong,  #c9c3b4);

  /* Semantic */
  --gg-color-success:                                          #4a7c4a;
  --gg-color-success-soft:                                     #e8efe5;
  --gg-color-warning:                                          #c98828;
  --gg-color-warning-soft:                                     #fbf0d9;
  --gg-color-error:                                            #b04646;
  --gg-color-error-soft:                                       #f7e0e0;
  --gg-color-info:                                             #527591;
  --gg-color-info-soft:                                        #e2eaf1;

  /* Additional status palette for badges and accents — calmed-down
     versions of Booking's badge palette, retrofitted to the Grove
     earth-tone language while preserving semantic mappings. */
  --gg-color-neutral:                                          #374151;
  --gg-color-neutral-soft:                                     #f0eee8;
  --gg-color-muted:                                            #8a857a;
  --gg-color-muted-soft:                                       #ebe8e0;
  --gg-color-violet:                                           #5b21b6;
  --gg-color-violet-soft:                                      #efeaf6;

  /* Brand accent palette — fixed Gather Grove identity, deliberately NOT
     cascaded off Elementor globals (these are GG's own accents, not studio
     brand — primary/secondary/accent already cascade for that). Use sparingly
     and purposefully: gold for celebration moments (founding-member,
     future Courses certificates + milestones); rose for
     Communities warmth (welcome rituals, feed reactions). Reach for these in
     GG-owned surfaces, not in customer-facing widgets where the studio's own
     brand should lead.

     ⚠ Keep this comment free of tier/paid-plan vocabulary. This file is
     VENDORED into Booking and ships inside its WordPress.org artifact, where
     the review tooling reads the self-description rather than tracing the call
     graph — Booking scrubbed exactly this wording out of its own mirror in its
     PR #100, and the vendored copy underneath was missed. Scrubbed here so that
     every mirror and vendored copy stays safe by construction. Note this
     warning names no such words itself, on purpose: a scanner matches strings,
     not intent, so spelling them out to forbid them ships them. */
  --gg-color-gold:                                             #c68e17;
  --gg-color-gold-soft:                                        #f8eecf;
  --gg-color-rose:                                             #d8a7b1;
  --gg-color-rose-soft:                                        #f6e7eb;

  /* Focus ring */
  --gg-color-focus:                                            #4a7c4a;
  --gg-color-focus-ring:                                       rgba(74, 124, 74, 0.35);

  /* ─────────────────────────────────────────────────────────────────
   * SPACING — 4px scale
   * ───────────────────────────────────────────────────────────────── */
  --gg-space-1:   0.25rem;   /*   4px */
  --gg-space-2:   0.5rem;    /*   8px */
  --gg-space-3:   0.75rem;   /*  12px */
  --gg-space-4:   1rem;      /*  16px */
  --gg-space-5:   1.5rem;    /*  24px */
  --gg-space-6:   2rem;      /*  32px */
  --gg-space-7:   3rem;      /*  48px */
  --gg-space-8:   4rem;      /*  64px */
  --gg-space-9:   6rem;      /*  96px */
  --gg-space-10:  8rem;      /* 128px */

  /* ─────────────────────────────────────────────────────────────────
   * RADIUS
   * ───────────────────────────────────────────────────────────────── */
  --gg-radius-sm:    4px;
  --gg-radius-md:    8px;
  --gg-radius-lg:   16px;
  --gg-radius-xl:   24px;
  --gg-radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────────────
   * SHADOW
   * ───────────────────────────────────────────────────────────────── */
  --gg-shadow-sm:   0 1px 2px  rgba(28, 26, 22, 0.05);
  --gg-shadow-md:   0 4px 12px rgba(28, 26, 22, 0.08);
  --gg-shadow-lg:   0 8px 32px rgba(28, 26, 22, 0.12);
  --gg-shadow-focus: 0 0 0 3px var(--gg-color-focus-ring);

  /* ─────────────────────────────────────────────────────────────────
   * TYPOGRAPHY — families
   * Elementor global font fallback where applicable.
   * ───────────────────────────────────────────────────────────────── */
  /* Body → --gg-brand-font-body Variable → Elementor "text" global (Montserrat
     on gathergrove.io); heading → --gg-brand-font-heading → Elementor "primary"
     global (Red Hat Display on gathergrove.io).
     The generic system stack lives OUTSIDE the var() so it ALWAYS applies as
     a terminal fallback — even when the Elementor global IS set to a brand
     family whose webfont isn't loaded (e.g. wp-admin, where Elementor's
     globals can be present but the webfonts aren't enqueued). If the system
     stack were inside the var() fallback, var() would resolve to the bare
     unloaded family name and the browser would drop to its default serif. */
  --gg-type-body:    var(--gg-brand-font-body, var(--e-global-typography-text-font-family, 'Montserrat')),
                     system-ui, -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, sans-serif;
  --gg-type-heading: var(--gg-brand-font-heading, var(--e-global-typography-primary-font-family, 'Red Hat Display')),
                     system-ui, -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, sans-serif;
  --gg-type-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular,
                     Menlo, Monaco, Consolas, monospace;

  /* Label / eyebrow — Kollektif on gathergrove.io (Elementor "secondary"
     typography global). The brand's signature uppercase + letter-spaced
     treatment for eyebrows, labels, badge text, and button text. Pair with
     text-transform: uppercase + var(--gg-type-tracking-wide) at the call
     site. Renders as Kollektif wherever the webfont is loaded (frontend via
     Elementor); falls back to system labels in wp-admin (system stack kept
     OUTSIDE the var() so an unloaded brand family can't drop to serif). */
  --gg-type-label:   var(--e-global-typography-secondary-font-family, 'Kollektif'),
                     system-ui, -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, sans-serif;

  /* Type sizes */
  --gg-type-size-xs:    0.75rem;     /* 12px */
  --gg-type-size-sm:    0.875rem;    /* 14px */
  --gg-type-size-md:    1rem;        /* 16px (base) */
  --gg-type-size-lg:    1.125rem;    /* 18px */
  --gg-type-size-xl:    1.25rem;     /* 20px */
  --gg-type-size-2xl:   1.5rem;      /* 24px */
  --gg-type-size-3xl:   2rem;        /* 32px */
  --gg-type-size-4xl:   2.5rem;      /* 40px */
  --gg-type-size-5xl:   3.5rem;      /* 56px — conversational mode big-type */

  /* Type weights */
  --gg-type-weight-regular: 400;
  --gg-type-weight-medium:  500;
  --gg-type-weight-bold:    600;

  /* Line heights */
  --gg-type-leading-tight:    1.2;
  --gg-type-leading-snug:     1.4;
  --gg-type-leading-normal:   1.55;
  --gg-type-leading-relaxed:  1.75;

  /* Letter spacing */
  --gg-type-tracking-tight:    -0.02em;
  --gg-type-tracking-normal:    0;
  --gg-type-tracking-wide:      0.04em;

  /* ─────────────────────────────────────────────────────────────────
   * MOTION
   * ───────────────────────────────────────────────────────────────── */
  --gg-duration-instant: 0ms;
  --gg-duration-fast:    150ms;
  --gg-duration-base:    250ms;
  --gg-duration-slow:    400ms;
  --gg-duration-slower:  600ms;

  --gg-ease-linear:  linear;
  --gg-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);     /* default for entrances */
  --gg-ease-in:      cubic-bezier(0.7, 0, 0.84, 0);     /* default for exits */
  --gg-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --gg-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot — conversational mode */

  /* ─────────────────────────────────────────────────────────────────
   * Z-INDEX
   * ───────────────────────────────────────────────────────────────── */
  --gg-z-base:      1;
  --gg-z-elevated:  10;
  --gg-z-sticky:    100;
  --gg-z-overlay:   1000;
  --gg-z-modal:     1100;
  --gg-z-toast:     1200;
  --gg-z-tooltip:   1300;
}

/* ─────────────────────────────────────────────────────────────────
 * REDUCED MOTION
 * Honor user preference everywhere in the ecosystem.
 * ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gg-duration-fast:    0ms;
    --gg-duration-base:    0ms;
    --gg-duration-slow:    0ms;
    --gg-duration-slower:  0ms;
  }
}