/**
 * Platform PI v1.0 Design System
 * Source of truth for tokens and global layout only.
 */

:root {
    --platform-pi-primary: #7B2CFF;
    --platform-pi-secondary: #F2C94C;
    --platform-pi-text: #1f1633;
    --platform-pi-muted: #6f6680;
    --platform-pi-surface: #ffffff;
    --platform-pi-surface-alt: #faf7ff;
    --platform-pi-border: rgba(123,44,255,.14);
    --platform-pi-radius: 18px;
    --platform-pi-shadow: 0 10px 28px rgba(42,23,80,.06);
    --platform-pi-section-spacing: 54px;
    --platform-pi-component-accent: var(--platform-pi-primary, #7B2CFF);
}

/*
 * NOTE (2026-07-21): the "backward compatibility" block that used to be
 * here has been removed. It redeclared each token on .platform-pi-presentation-page
 * as var(--token, fallback) - a SELF-REFERENCE. Per the CSS Custom Properties
 * spec, a custom property that references itself becomes "guaranteed-invalid",
 * and that invalid state is inherited by all descendants. In practice this
 * silently broke every Appearance-driven color/token for the entire
 * Presentation Page: no matter what was set at :root (via the Appearance
 * admin page), every var(--platform-pi-primary, X) inside the page fell
 * back to its own hardcoded X, because the inherited custom property itself
 * was invalid. Removing this block restores normal :root -> descendant
 * inheritance, which is all that was ever needed here.
 */

body .platform-pi-presentation-page.content-area,
body #primary.platform-pi-presentation-page,
body .site-content .platform-pi-presentation-page {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
}

body .platform-pi-presentation-page .container {
    width: min(100% - 48px, 1320px) !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body .platform-pi-presentation-page .piatapi-section {
    padding-top: var(--platform-pi-section-spacing, 54px) !important;
    padding-bottom: var(--platform-pi-section-spacing, 54px) !important;
}

body .platform-pi-presentation-page .piatapi-section-alt {
    background: var(--platform-pi-surface-alt, #faf7ff) !important;
}

body .platform-pi-presentation-page .piatapi-lead,
body .platform-pi-presentation-page .piatapi-section-lead {
    color: var(--platform-pi-muted, #6f6680) !important;
}

body .platform-pi-presentation-page .piatapi-kicker {
    color: var(--platform-pi-primary, #7B2CFF) !important;
}

body .platform-pi-presentation-page .piatapi-buttons .button,
body .platform-pi-presentation-page a.button,
body .platform-pi-presentation-page button.button,
body .platform-pi-presentation-page input[type="submit"].button {
    background: var(--platform-pi-primary, #7B2CFF) !important;
    border-color: var(--platform-pi-primary, #7B2CFF) !important;
    color: #fff !important;
}

body .platform-pi-presentation-page .piatapi-buttons .button:hover,
body .platform-pi-presentation-page a.button:hover,
body .platform-pi-presentation-page button.button:hover {
    background: var(--platform-pi-secondary, #F2C94C) !important;
    border-color: var(--platform-pi-secondary, #F2C94C) !important;
    color: var(--platform-pi-text, #1f1633) !important;
}

@media (max-width: 767px) {
    body .platform-pi-presentation-page .container {
        width: min(100% - 32px, 1320px) !important;
    }
}