/* StyleSeat Blog — Design Tokens
   Enqueue first. All values the design uses, as CSS custom properties. */
:root {
  /* ---------- Color ---------- */
  --ssb-bg: #FFFFFF;              /* page background */
  --ssb-bg-alt: #F9F9F9;          /* alternate section background (hero wrap, table stripes) */
  --ssb-surface: #FFFFFF;         /* card / panel background */
  --ssb-text: #121111;            /* primary text */
  --ssb-text-muted: #757575;      /* secondary / meta text (AA on white: 4.6:1) */
  --ssb-text-muted-on-tint: #707070; /* same role, but on tinted panels. #757575 drops to
                                        4.38:1 on --ssb-bg-alt and 4.41:1 on
                                        --ssb-soft-green; the spec only checked white.
                                        #707070 is 4.70:1 and 4.74:1 respectively. */
  --ssb-text-body: #494948;       /* long-form article body text */
  --ssb-border: #E8E8E8;          /* hairline borders / dividers */
  --ssb-border-soft: #F0F0F0;     /* list-row dividers */
  --ssb-brand: #002918;           /* brand primary (buttons, headings on light, footer bg) */
  --ssb-brand-hover: #00331D;     /* brand primary hover */
  --ssb-accent: #CDF545;          /* electric lime — badges, eyebrows on dark, accent only (never behind body text) */
  --ssb-accent-hover: #B9E57B;    /* lime hover */
  --ssb-soft-green: #F2FFD9;      /* soft green panel (pro conversion band, tags) */
  --ssb-soft-green-text: #3D7429; /* eyebrow on soft green. Darkened from the handoff's
                                     #4C8D36, which measured 4.06:1 on white and 3.88:1 on
                                     soft green — below AA for normal text, contradicting
                                     design-notes.md section 4. #3D7429 is 5.6:1 / 5.4:1. */
  --ssb-soft-green-deep: #00331D; /* AA text on soft green */
  --ssb-soft-yellow: #FFF6CB;     /* soft yellow panel */
  --ssb-soft-yellow-text: #8A6D00;/* AA-ish eyebrow on soft yellow */
  --ssb-link: #143FB2;            /* body link default (8.2:1 on white) */
  --ssb-link-hover: #0F2F88;      /* body link hover */
  --ssb-link-visited: #6D28A8;    /* body link visited */
  --ssb-focus: #143FB2;           /* focus ring color */
  --ssb-overlay: rgba(18,17,17,.55); /* photo overlay chips */

  /* ---------- Typography ---------- */
  --ssb-font-text: 'Poppins', 'Segoe UI', Arial, sans-serif;   /* headings + body */
  --ssb-font-num: 'Space Grotesk', 'Poppins', monospace;       /* numbers/stats only */

  /* Desktop sizes (mobile overrides below) */
  --ssb-h1-size: 40px;  --ssb-h1-weight: 400; --ssb-h1-lh: 1.15; --ssb-h1-ls: -0.03em; --ssb-h1-mt: 0;    --ssb-h1-mb: 16px;
  --ssb-h2-size: 26px;  --ssb-h2-weight: 500; --ssb-h2-lh: 1.2;  --ssb-h2-ls: -0.01em; --ssb-h2-mt: 36px; --ssb-h2-mb: 12px;
  --ssb-h3-size: 20px;  --ssb-h3-weight: 500; --ssb-h3-lh: 1.25; --ssb-h3-ls: 0;       --ssb-h3-mt: 28px; --ssb-h3-mb: 10px;
  --ssb-h4-size: 17px;  --ssb-h4-weight: 500; --ssb-h4-lh: 1.3;  --ssb-h4-ls: 0;       --ssb-h4-mt: 24px; --ssb-h4-mb: 8px;
  --ssb-body-size: 16px; --ssb-body-weight: 400; --ssb-body-lh: 1.65; --ssb-body-mb: 16px;
  --ssb-small-size: 13px; --ssb-small-lh: 1.5;   /* meta, bylines, card excerpts */
  --ssb-caption-size: 12px; --ssb-caption-lh: 1.45;
  --ssb-eyebrow-size: 12px; --ssb-eyebrow-ls: .14em; /* uppercase section eyebrows */

  /* ---------- Spacing scale (4px grid) ---------- */
  --ssb-sp-1: 4px;  --ssb-sp-2: 8px;  --ssb-sp-3: 12px; --ssb-sp-4: 16px;
  --ssb-sp-5: 24px; --ssb-sp-6: 32px; --ssb-sp-7: 48px; --ssb-sp-8: 64px;

  /* ---------- Radii ---------- */
  --ssb-radius-btn: 8px;    /* buttons, inputs */
  --ssb-radius-card: 16px;  /* cards, panels, images */
  --ssb-radius-tile: 12px;  /* small tiles, thumbnails */
  --ssb-radius-pill: 999px; /* pills, chips, search */

  /* ---------- Shadows ---------- */
  --ssb-shadow-card: 0 1px 4px rgba(203,203,203,.5);
  --ssb-shadow-raised: 0 2px 12px rgba(203,203,203,.5);
  --ssb-shadow-overlay: 0 8px 32px rgba(0,0,0,.10);

  /* ---------- Layout ---------- */
  --ssb-container: 1312px;      /* main content max-width */
  --ssb-article-width: 760px;   /* single-post article column */
  --ssb-sidebar-width: 340px;   /* single-post sidebar */
}

/* Mobile type overrides (Elementor mobile breakpoint) */
@media (max-width: 767px) {
  :root {
    --ssb-h1-size: 28px; --ssb-h1-ls: -0.02em;
    --ssb-h2-size: 22px; --ssb-h2-mt: 28px;
    --ssb-h3-size: 18px;
    --ssb-h4-size: 16px;
    --ssb-body-size: 15px;
  }
}

/* ---------- Web fonts required (total 4 weights — CWV budget) ----------
   Poppins 400  (body, H1)
   Poppins 500  (H2–H4, buttons, labels)
   Poppins 600  (strong/bold in article body)
   Space Grotesk 500 (stats/prices only)
   Load via:
   https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Space+Grotesk:wght@500&display=swap
*/