/* ==========================================================================
   ToolsGrove Design System - Canonical Tokens
   Extracted from the ToolsGrove production site (Elementor pages, GeneratePress
   child theme, ToolSuite Pro templates) and normalized into one scale.

   Scope rule: never put these on bare :root in WordPress. Always scope to a
   surface class so the tokens cannot leak into plugin or admin UI.
     body.tg-surface   - whole-page surfaces (blog, archives, single posts)
     .tg-section       - a single Elementor HTML widget block
   ========================================================================== */

body.tg-surface,
.tg-section {

    /* ---- Brand ramp (locked - do not improvise new greens) ---- */
    --tg-green:        #059669;  /* primary action, active state, accents   */
    --tg-green-dark:   #047857;  /* hover on primary, gradient mid          */
    --tg-green-deep:   #065f46;  /* text on soft backgrounds, gradient end  */
    --tg-green-light:  #10b981;  /* highlights, glow, gradient start        */

    /* ---- Soft tints ---- */
    --tg-soft:         #ecfdf5;  /* tinted panel / icon chip background     */
    --tg-soft-2:       #d1fae5;  /* stronger tint, borders on soft panels   */
    --tg-soft-3:       #f7fcf9;  /* barely-there page wash                  */

    /* ---- Ink ramp ---- */
    --tg-white:        #ffffff;
    --tg-ink:          #0b1f18;  /* headings only                           */
    --tg-text:         #2d4138;  /* body copy                               */
    --tg-muted:        #62736a;  /* secondary copy, descriptions            */
    --tg-muted-light:  #87968f;  /* meta, timestamps, captions              */

    /* ---- Page backgrounds ---- */
    --tg-page-bg:      #f8fcfa;
    --tg-page-bg-top:  #f9fdfa;

    /* ---- Borders (green-tinted, never neutral grey) ---- */
    --tg-border-light: rgba(6, 95, 70, 0.07);   /* card hairline           */
    --tg-border:       rgba(6, 95, 70, 0.10);   /* default divider         */
    --tg-border-green: rgba(5, 150, 105, 0.17); /* emphasis / hover border */

    /* ---- Elevation (green-tinted shadows, never neutral black) ---- */
    --tg-shadow-card:  0 6px 22px rgba(15, 64, 49, 0.03),
                       inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --tg-shadow-pill:  0 8px 22px rgba(6, 95, 70, 0.05);
    --tg-shadow-hover: 0 18px 34px rgba(6, 95, 70, 0.08);
    --tg-shadow-brand: 0 11px 23px rgba(5, 150, 105, 0.20);

    /* ---- Motion ---- */
    --tg-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --tg-dur-fast:     0.22s;   /* hover lift, colour change   */
    --tg-dur-base:     0.30s;   /* card transitions            */
    --tg-dur-enter:    0.60s;   /* entrance animation          */

    /* ---- Radii (normalized: the source drifted across 7-20px) ---- */
    --tg-r-xs:         8px;     /* chips, small controls       */
    --tg-r-sm:         12px;    /* inputs, compact cards       */
    --tg-r-md:         19px;    /* THE card radius, signature  */
    --tg-r-lg:         24px;    /* large panels, hero surfaces */
    --tg-r-pill:       999px;   /* badges, buttons, eyebrows   */

    /* ---- Layout ---- */
    --tg-container:    1220px;  /* content max width           */
    --tg-gutter:       20px;    /* min side gutter             */
}

/* --------------------------------------------------------------------------
   Typography. Sora for headings, Inter for everything else.
   Load once per page:
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap
   -------------------------------------------------------------------------- */

body.tg-surface,
.tg-section {
    color: var(--tg-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The body must paint its own ground from a token. Leave it unset and whatever
   is underneath shows through: a parent theme's default grey in WordPress, the
   host's ground in an embedded page. Either way an off-palette neutral leaks
   in behind everything, which is the one thing this system does not allow. */
body.tg-surface {
    background: var(--tg-page-bg);
}

/* Heading colour resolves through --tg-heading so a surface (the dark band, a
   featured tile) can override it by redefining one property. Setting it with a
   more specific selector instead would lose to this rule's specificity. */
body.tg-surface h1, body.tg-surface h2, body.tg-surface h3,
body.tg-surface h4, body.tg-surface h5, body.tg-surface h6,
.tg-section h1, .tg-section h2, .tg-section h3,
.tg-section h4, .tg-section h5, .tg-section h6 {
    color: var(--tg-heading, var(--tg-ink));
    font-family: "Sora", "Inter", sans-serif;
}

/* Type scale. Display sizes are fluid; UI sizes are fixed.
   Headings are tight (-0.04em); small uppercase labels are loose (+0.10em). */
.tg-display   { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.040em; }
.tg-h2        { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; }
.tg-h3        { font-size: 1.25rem;  font-weight: 700; line-height: 1.25; letter-spacing: -0.020em; }
.tg-lead      { font-size: 1rem;     font-weight: 400; line-height: 1.65; color: var(--tg-muted); }
.tg-body      { font-size: 0.875rem; font-weight: 400; line-height: 1.6;  color: var(--tg-text); }
.tg-small     { font-size: 0.8125rem; font-weight: 500; line-height: 1.5; color: var(--tg-muted); }
.tg-label     { font-size: 0.6875rem; font-weight: 700; line-height: 1.2;
                text-transform: uppercase; letter-spacing: 0.10em; color: var(--tg-muted); }

/* --------------------------------------------------------------------------
   Breakpoints. The source drifted across 980/1000/1020/1050/1180 and
   430/440/480/500/520/560/620/720/760/768. Use only these four.
     1050px  desktop  -> tablet   (multi-column grids collapse to 2)
      760px  tablet   -> mobile   (2 columns collapse to 1, nav goes drawer)
      520px  mobile   -> small    (padding and type step down)
      430px  small    -> compact  (dense utility layouts)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Motion primitives. The whole site runs on one entrance keyframe.
   -------------------------------------------------------------------------- */
@keyframes tg-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tg-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes tg-spin { to { transform: rotate(360deg); } }

.tg-enter { animation: tg-fade-up var(--tg-dur-enter) var(--tg-ease) both; }

/* Stagger children on a 40ms step. Entrance only, never looping. */
.tg-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.tg-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.tg-stagger > *:nth-child(3) { animation-delay: 0.12s; }
.tg-stagger > *:nth-child(4) { animation-delay: 0.16s; }
.tg-stagger > *:nth-child(5) { animation-delay: 0.20s; }
.tg-stagger > *:nth-child(6) { animation-delay: 0.24s; }
.tg-stagger > *:nth-child(7) { animation-delay: 0.28s; }
.tg-stagger > *:nth-child(8) { animation-delay: 0.32s; }

/* Mandatory. Every ToolsGrove surface ships this block. */
@media (prefers-reduced-motion: reduce) {
    body.tg-surface *,
    .tg-section * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}