/* ============================================================
   GRILLY child theme — design tokens (step 1)
   ------------------------------------------------------------
   Source of truth for COLOURS is the Blocksy Global Color Palette
   (Customizer → General Options → Colors). This file only gives the
   palette semantic names and adds the tokens Blocksy has no setting
   for (spacing, radius, shadows, focus ring, status colours).

   Fallback hex values equal the mockup values, so this file also
   renders correctly if a palette slot is missing. Palette slots 9–13
   are the "Add New Color" entries — add them in exactly this order.
   ============================================================ */

:root {
  /* ---- Brand palette → Blocksy slots 1–8 ---- */
  --g-orange:      var(--theme-palette-color-1, #DF4F00);
  --g-orange-600:  var(--theme-palette-color-2, #C04400); /* hover / pressed */
  --g-orange-ink:  var(--theme-palette-color-3, #9E3800); /* orange as TEXT on light bg (AA) */
  --g-char:        var(--theme-palette-color-4, #2B2B2B);
  --g-ink:         var(--theme-palette-color-5, #1C1B19);
  --g-muted:       var(--theme-palette-color-6, #6C6459);
  --g-cream:       var(--theme-palette-color-7, #F8F3E8);
  --g-line:        var(--theme-palette-color-8, #DBD0BA);

  /* ---- Extended palette → "Add New Color" slots 9–13 ---- */
  --g-peach:       var(--theme-palette-color-9,  #E1B7A2);
  --g-peach-soft:  var(--theme-palette-color-10, #F2DED3);
  --g-blue:        var(--theme-palette-color-11, #2F6EF6); /* focus ring, info notice, tip badge */
  --g-orange-dark: var(--theme-palette-color-12, #FF8A4C); /* orange as TEXT on charcoal */
  --g-black:       var(--theme-palette-color-13, #151412); /* announcement bar, deepest surfaces */

  /* ---- Derived neutrals (no Blocksy setting) ---- */
  --g-ink-2:        #4A453E;  /* secondary text */
  --g-line-2:       #B8AC94;  /* decorative borders (cards, chips) */
  --g-char-2:       #3A362F;  /* borders / dividers on charcoal */
  --g-on-dark:      #EDE7DA;  /* body text on charcoal */
  --g-on-dark-muted:#A79E8E;  /* muted text on charcoal (5.3:1) */
  --g-surface:      #FFFFFF;  /* cards, panels, header */
  --g-surface-2:    #FDFBF6;  /* image backgrounds, table zebra */
  --g-on-orange:    #141210;  /* text on orange buttons — never white at body size */
  --g-input-border: #8A7F67;  /* ≥3:1 non-text contrast on white and cream */
  --g-blue-fill:    #2A64E0;  /* blue as a fill behind white text (4.5:1+) */

  /* ---- Status — always paired with a shape or text, never colour alone ---- */
  --g-ok:   #1E7A4B;
  --g-warn: #8A5A00;
  --g-err:  #B3261E;

  /* ---- Space scale ---- */
  --g-s1: 4px;  --g-s2: 8px;  --g-s3: 12px; --g-s4: 16px; --g-s5: 20px;
  --g-s6: 24px; --g-s7: 32px; --g-s8: 40px; --g-s9: 56px; --g-s10: 72px; --g-s11: 96px;

  /* Section rhythm used by GRILLY Patterns (overridden per breakpoint below) */
  --g-section:       72px;
  --g-section-tight: 40px;
  --g-gap:           20px;   /* product / category card gap */
  --g-gap-editorial: 40px;   /* two-column editorial splits */

  /* ---- Radius ---- */
  --g-r-xs:   6px;    /* badges, thumbnails */
  --g-r-sm:   10px;   /* inputs, small tiles */
  --g-r-md:   16px;   /* cards, notices, spec strip */
  --g-r-lg:   24px;   /* panels: buy column, expert tip, hero tag */
  --g-r-xl:   32px;   /* hero card, large editorial images */
  --g-r-pill: 999px;  /* buttons, chips, search field */

  /* ---- Elevation (only header, dropdowns, drawers cast shadows) ---- */
  --g-sh-1: 0 1px 2px rgba(28, 27, 25, .06);
  --g-sh-2: 0 6px 24px rgba(28, 27, 25, .10);

  /* ---- Motion ---- */
  --g-ease: 150ms ease;

  /* ---- Focus ring ---- */
  --g-focus: 0 0 0 3px #fff, 0 0 0 6px var(--g-blue);
}

/* Blocksy tablet breakpoint: 690–999px */
@media (max-width: 999.98px) {
  :root {
    --g-section: 56px;
    --g-section-tight: 32px;
    --g-gap: 16px;
    --g-gap-editorial: 24px;
  }
}

/* Blocksy mobile breakpoint: ≤689px */
@media (max-width: 689.98px) {
  :root {
    --g-section: 40px;
    --g-section-tight: 24px;
    --g-gap: 12px;
  }
}

/* ============================================================
   Global rules — the only non-token CSS in this file
   ============================================================ */

/* One visible focus ring for keyboard users, site-wide.
   Blocksy has no global focus-ring control; this replaces browser defaults. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--g-focus);
  border-radius: var(--g-r-xs);
}

/* Respect reduced-motion (kept from the mockup). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Tabular numerals for prices, counts, specs. Apply the class where numbers align. */
.g-num,
.price,
.woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Type roles reused by Patterns (Gutenberg "Additional CSS class"). */
.g-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-orange-ink);
  margin: 0 0 var(--g-s3);
}
.g-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--g-ink-2);
  max-width: 60ch;
}
.g-display {
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.08;
  text-wrap: balance;
}