/* === content-stats ===
 * 3-column stats row. Tone variant for dark/light adjacency.
 *
 * @updated 3.5.54 — tone variant
 */
.sts-inner {
    background: var(--ssla-bg-color, transparent);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding: 60px 48px;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.sts-val {
    font-family: var(--paint-font-family, var(--shell-hf, inherit));
    font-size: var(--paint-h2-size, clamp(2rem, 4vw, 3rem));
    font-weight: var(--paint-heading-weight, 800);
    color: var(--shell-accent, var(--preset-accent, currentColor));
    line-height: 1;
    letter-spacing: -1px;
}

.sts-lbl {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--shell-m, var(--preset-text-muted, #6b7280));
    margin-top: 10px;
    font-weight: 700;
}

/* Tone: dark — for adjacency with dark hero sections.
 * Background uses preset-primary-dark so it aesthetically continues
 * the dark hero. Numbers use preset-accent (gold). Labels muted-light.
 *
 * v3.5.70 W4 paint sweep — body color was hardcoded #fff and label color
 * was hardcoded rgba(255,255,255,0.65). Both now route through paint
 * tokens with the previous hardcoded values as fallback so any palette
 * that supplies --shell-fg-dark / --shell-m-dark wins, while presets that
 * don't supply those tokens render exactly as before. */
.ssla-content-stats--tone-dark .sts-inner {
    background: var(--ssla-bg-color, var(--shell-bg-dark-cool, var(--preset-primary-dark, #1a2a45)));
    color: var(--shell-fg-dark, var(--preset-text-on-dark, #fff));
}
.ssla-content-stats--tone-dark .sts-val {
    color: var(--shell-accent, var(--preset-accent, #E2A03F));
}
.ssla-content-stats--tone-dark .sts-lbl {
    color: var(--shell-m-dark, var(--preset-text-muted-on-dark, rgba(255, 255, 255, 0.65)));
}

/* Tone: dark with full-bleed bg (when used between two dark sections — unifies). */
.ssla-content-stats--tone-dark[data-ssla-type="content-stats"] {
    background: var(--ssla-bg-color, var(--shell-bg-dark-cool, var(--preset-primary-dark, #1a2a45)));
}

@media (max-width: 768px) {
    .sts-inner {
        grid-template-columns: 1fr;
        padding: 40px 24px;
        gap: 24px;
    }
}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark .sts-inner{color: var(--shell-fg-dark, #ffffff)}
.ssla-tone-dark .sts-val{color: var(--shell-accent, #E2A03F)}
.ssla-tone-dark .sts-lbl{color: rgba(255, 255, 255, 0.65)}
.ssla-tone-light .sts-inner{color: var(--shell-h, #1a1d21)}
.ssla-tone-light .sts-val{color: var(--shell-accent, #B23232)}
.ssla-tone-light .sts-lbl{color: var(--shell-m, #6b7280)}