/**
 * CHLOM v2 — Section Token Bridges
 *
 * Maps --section-* tokens to each theme's native CSS variables.
 * Loads AFTER theme CSS (so it can reference --{theme}-* vars)
 * and BEFORE color-safety.css (so safety rules can override).
 *
 * Cascade: body.bpage [class*="theme-"].section_space (specificity 0-2-1)
 * matches bpage-rhythm.css specificity — color wins by cascade order.
 *
 * RULE: No padding, margin, or box-sizing in this file.
 * RULE: No !important anywhere.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   K3 (base/reference theme)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="k3-"].section_space,
body.bpage .section-color-wrapper [class*="k3-"].section_space {
    --section-accent: var(--k3-primary, #f97316);
    --section-accent-2: var(--k3-primary-light, #FB923C);
    --section-bg: #ffffff;
    --section-surface: #ffffff;
    --section-surface-2: #f8fafc;
    --section-text: #0f172a;
    --section-text-muted: #64748b;
    --section-border: rgba(15,23,42,0.12);
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 249,115,22);
    --section-gradient-stop-1: var(--k3-primary, #f97316);
    --section-gradient-stop-2: var(--k3-primary-dark, #ea580c);
    --section-shadow: 0 10px 40px rgba(var(--section-accent-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modern (geometric, clean, blue+cyan identity)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="modern-"].section_space,
body.bpage .section-color-wrapper [class*="modern-"].section_space {
    --section-accent: var(--modern-primary, var(--k3-primary, #3b82f6));
    --section-accent-2: #06B6D4;
    --section-bg: #ffffff;
    --section-surface: #f8fafc;
    --section-surface-2: #eff6ff;
    --section-text: #0f172a;
    --section-text-muted: #64748b;
    --section-border: #e2e8f0;
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 59,130,246);
    --section-gradient-stop-1: var(--modern-primary, var(--k3-primary, #3b82f6));
    --section-gradient-stop-2: var(--k3-primary-dark, #2563eb);
    --section-shadow: 0 20px 60px rgba(var(--section-accent-rgb), 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Unity (legacy integration, warm tones)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="uni-"].section_space,
body.bpage .section-color-wrapper [class*="uni-"].section_space {
    --section-accent: var(--k3-primary, #f26d21);
    --section-accent-2: var(--k3-primary-light, #fb923c);
    --section-bg: #ffffff;
    --section-surface: #f8f9fa;
    --section-surface-2: #fff7ed;
    --section-text: #333333;
    --section-text-muted: #6b7280;
    --section-border: #e5e7eb;
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 242,109,33);
    --section-gradient-stop-1: var(--k3-primary, #f26d21);
    --section-gradient-stop-2: var(--k3-primary-dark, #ea580c);
    --section-shadow: 0 10px 40px rgba(var(--section-accent-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Editorial (magazine, serif, warm neutral)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="ed-"].section_space,
body.bpage .section-color-wrapper [class*="ed-"].section_space {
    --section-accent: var(--ed-accent, var(--k3-primary, #f97316));
    --section-accent-2: var(--ed-accent-light, var(--k3-primary-light, #FB923C));
    --section-bg: #faf9f7;
    --section-surface: #ffffff;
    --section-surface-2: #f5f4f2;
    --section-text: #262626;
    --section-text-muted: #737373;
    --section-border: #e5e5e5;
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--ed-accent-rgb, var(--k3-shadow-rgb, 249,115,22));
    --section-gradient-stop-1: var(--ed-accent, var(--k3-primary, #f97316));
    --section-gradient-stop-2: var(--ed-accent-dark, var(--k3-primary-dark, #ea580c));
    --section-shadow: 0 10px 40px rgba(var(--section-accent-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Prime (executive, navy+gold identity)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="prime-"].section_space,
body.bpage .section-color-wrapper [class*="prime-"].section_space {
    --section-accent: var(--prime-primary, var(--k3-primary, #1E3A5F));
    --section-accent-2: #D4AF37;
    --section-bg: #ffffff;
    --section-surface: #f8fafc;
    --section-surface-2: #f0f4f8;
    --section-text: #111827;
    --section-text-muted: #64748b;
    --section-border: #e2e8f0;
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 30,58,95);
    --section-gradient-stop-1: var(--prime-primary, var(--k3-primary, #1E3A5F));
    --section-gradient-stop-2: var(--prime-primary-dark, var(--k3-primary-dark, #0F2744));
    --section-shadow: 0 10px 40px rgba(var(--section-accent-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Studio (dark mode, purple+pink identity, neon aesthetic)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="studio-"].section_space,
body.bpage .section-color-wrapper [class*="studio-"].section_space {
    --section-accent: var(--studio-primary, var(--k3-primary, #8B5CF6));
    --section-accent-2: #EC4899;
    --section-bg: #0f0f1a;
    --section-surface: #1a1a2e;
    --section-surface-2: #252545;
    --section-text: #e2e8f0;
    --section-text-muted: #94a3b8;
    --section-border: rgba(255,255,255,0.06);
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 139,92,246);
    --section-gradient-stop-1: var(--studio-primary, var(--k3-primary, #8B5CF6));
    --section-gradient-stop-2: var(--studio-primary-dark, var(--k3-primary-dark, #7C3AED));
    --section-shadow: 0 10px 40px rgba(var(--section-accent-rgb), 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Impact (warm gradients, teal identity, philanthropy)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="impact-"].section_space,
body.bpage .section-color-wrapper [class*="impact-"].section_space {
    --section-accent: var(--impact-primary, var(--k3-primary, #F97316));
    --section-accent-2: #14B8A6;
    --section-bg: #FFF7ED;
    --section-surface: #ffffff;
    --section-surface-2: #FEF3C7;
    --section-text: #1F2937;
    --section-text-muted: #6B7280;
    --section-border: #FED7AA;
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 249,115,22);
    --section-gradient-stop-1: var(--impact-primary, var(--k3-primary, #F97316));
    --section-gradient-stop-2: var(--impact-primary-dark, var(--k3-primary-dark, #EA580C));
    --section-shadow: 0 10px 40px rgba(var(--section-accent-rgb), 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Community (nature, green+amber identity, friendly)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="community-"].section_space,
body.bpage .section-color-wrapper [class*="community-"].section_space {
    --section-accent: var(--community-primary, var(--k3-primary, #059669));
    --section-accent-2: #F59E0B;
    --section-bg: #F0FDF4;
    --section-surface: #ffffff;
    --section-surface-2: #ECFDF5;
    --section-text: #1F2937;
    --section-text-muted: #6B7280;
    --section-border: #D1FAE5;
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 5,150,105);
    --section-gradient-stop-1: var(--community-primary, var(--k3-primary, #059669));
    --section-gradient-stop-2: var(--community-primary-dark, var(--k3-primary-dark, #047857));
    --section-shadow: 0 10px 40px rgba(var(--section-accent-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Haven (earthy, warm, bronze+cream identity, hospitality)
   ═══════════════════════════════════════════════════════════════════════════ */
body.bpage [class*="haven-"].section_space,
body.bpage .section-color-wrapper [class*="haven-"].section_space {
    --section-accent: var(--haven-primary, var(--k3-primary, #f97316));
    --section-accent-2: #c9a96e;
    --section-bg: #faf5f0;
    --section-surface: #ffffff;
    --section-surface-2: #f5ede4;
    --section-text: #44403c;
    --section-text-muted: #78716c;
    --section-border: #e7e0d8;
    --section-on-accent: #ffffff;
    --section-accent-rgb: var(--k3-shadow-rgb, 249,115,22);
    --section-gradient-stop-1: var(--haven-primary, var(--k3-primary, #f97316));
    --section-gradient-stop-2: var(--haven-primary-dark, var(--k3-primary-dark, #ea580c));
    --section-shadow: 0 20px 60px rgba(var(--section-accent-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CV Token Consumption — Common Visual Patterns
   ═══════════════════════════════════════════════════════════════════════════
   Zero-specificity helpers via :where(). Any theme rule overrides these.
   Provides fallback visuals so sections look correct when variant tokens
   are set but no bespoke theme CSS targets the property.

   Fallback chain: --cv-* → --section-* → hardcoded safe default.

   RULE: No padding, margin, or box-sizing.
   RULE: No !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Wrapper: bg gradient overlay + text color + radius ------------------- */
:where(body.bpage .section_space) {
    color: var(--cv-text, var(--section-text, inherit));
    background-image: var(--cv-gradient, none);
    border-radius: var(--cv-radius, 0);
}

/* --- Cards: surface + border + elevation ---------------------------------- */
:where(body.bpage .section_space) :where([class*="-card"], [class*="__card"]) {
    background-color: var(--cv-surface, var(--section-surface, #fff));
    border-color: var(--cv-border, var(--section-border, transparent));
    border-radius: var(--cv-radius, 12px);
    box-shadow: var(--cv-shadow, var(--section-shadow, none));
}

/* --- Buttons / CTAs: accent fill + motion --------------------------------- */
:where(body.bpage .section_space) :where([class*="-btn"], [class*="-cta"], [class*="__btn"], [class*="__cta"]) {
    border-radius: var(--cv-radius, 10px);
    transition-duration: var(--cv-dur, 0.2s);
    transition-timing-function: var(--cv-ease, ease);
}

/* --- Focus-visible: section-aware accent outline -------------------------- */
body.bpage .section_space :focus-visible {
    outline-color: var(--cv-accent, var(--section-accent, var(--org, #F26122)));
}

/* --- Muted text helper ---------------------------------------------------- */
:where(body.bpage .section_space) :where([class*="-muted"], [class*="__muted"], [class*="-sub"], [class*="__sub"]) {
    color: var(--cv-text-muted, var(--section-text-muted, #64748b));
}