/*!
 * 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));
  --gg-color-primary-soft:    var(--e-global-color-secondary,  #e8efe5);
  --gg-color-primary-strong:                                   #1a2e1a;

  /* 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));
  --gg-color-accent-soft:                                      #f5ede0;

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

  /* Surface */
  --gg-color-background:      var(--gg-brand-background, #fefaf7);
  --gg-color-surface:                                          #ffffff;
  --gg-color-surface-raised:                                   #ffffff;
  --gg-color-overlay:                                          rgba(28, 26, 22, 0.4);

  /* Border */
  --gg-color-border:                                           #e8e3d8;
  --gg-color-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 premium / Pro / celebration moments (upgrade
     CTAs, 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. */
  --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;
  }
}