/**
 * CHLOM v2 — Color Contrast Safety Nets
 *
 * Loaded AFTER section-tokens.css to override when vendor overrides
 * create dangerous contrast situations.
 *
 * Uses CSS attribute selectors + data attributes to force readable
 * text on extreme backgrounds. These are last-resort fallbacks —
 * the PHP auto-contrast engine (color_token_helper.php) handles
 * most cases at render time.
 *
 * RULE: No padding, margin, or box-sizing in this file.
 * RULE: No !important (safety via cascade order, not weight).
 */

/* ─── Dark background safety ────────────────────────────────────────────
   When a section has [data-bg-mode="dark"], ensure readable text.
   The PHP renderer sets this attribute when bg luminance < 0.18.
   ────────────────────────────────────────────────────────────────────── */
body.bpage .section_space[data-bg-mode="dark"] {
    --section-text: #f1f5f9;
    --section-text-muted: #94a3b8;
    --section-surface: #1e293b;
    --section-surface-2: #334155;
    --section-border: rgba(255,255,255,0.10);
    --section-on-accent: #ffffff;
    color: var(--section-text);
}

body.bpage .section_space[data-bg-mode="dark"] :where(h1, h2, h3, h4, h5, h6) {
    color: var(--section-text);
}

body.bpage .section_space[data-bg-mode="dark"] :where(p, li, span, td, th) {
    color: var(--section-text);
}

body.bpage .section_space[data-bg-mode="dark"] :where(a) {
    color: var(--section-accent, #60a5fa);
}

/* ─── Light background safety ───────────────────────────────────────────
   When a section has [data-bg-mode="light"], ensure dark text.
   ────────────────────────────────────────────────────────────────────── */
body.bpage .section_space[data-bg-mode="light"] {
    --section-text: #0f172a;
    --section-text-muted: #64748b;
    --section-surface: #ffffff;
    --section-border: rgba(15,23,42,0.12);
    color: var(--section-text);
}

body.bpage .section_space[data-bg-mode="light"] :where(h1, h2, h3, h4, h5, h6) {
    color: var(--section-text);
}

/* ─── On-accent safety ──────────────────────────────────────────────────
   Elements placed directly on accent-colored backgrounds.
   .section-on-accent is applied by renderers to badges, buttons, etc.
   ────────────────────────────────────────────────────────────────────── */
body.bpage .section-on-accent {
    color: var(--section-on-accent, #ffffff);
}

/* ─── Inverted section version safety ───────────────────────────────────
   When section_version = 'inverted', ensure all nested elements
   inherit the inverted text color.
   ────────────────────────────────────────────────────────────────────── */
body.bpage .section_space[data-section-version="inverted"] {
    color: var(--section-text);
}

body.bpage .section_space[data-section-version="inverted"] :where(h1, h2, h3, h4, h5, h6, p, li, span, td, th, label) {
    color: var(--section-text);
}

body.bpage .section_space[data-section-version="inverted"] :where(a) {
    color: var(--section-accent, #60a5fa);
}

body.bpage .section_space[data-section-version="inverted"] :where([class*="-card"]) {
    background: var(--section-surface);
    border-color: var(--section-border);
}

/* ─── Minimal section version safety ────────────────────────────────────
   Desaturated mode — accent becomes neutral gray.
   ────────────────────────────────────────────────────────────────────── */
body.bpage .section_space[data-section-version="minimal"] :where(a) {
    color: var(--section-accent, #64748b);
}

/* ─── High-contrast preference ──────────────────────────────────────────
   Honor user system preference for increased contrast.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
    body.bpage .section_space {
        --section-border: rgba(0,0,0,0.25);
    }

    body.bpage .section_space[data-bg-mode="dark"] {
        --section-border: rgba(255,255,255,0.25);
    }
}

/* ─── Reduced motion ────────────────────────────────────────────────────
   Kill transitions + expose motion tokens so variant CSS can read them.
   --cv-motion: none  → use in animation-name / transition-property
   --cv-dur: 0s       → use in animation-duration / transition-duration
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.bpage .section_space {
        --cv-motion: none;
        --cv-dur: 0s;
        transition: none;
    }
}