/*
 * PBVM Design System
 * Keep global visual tokens here. Plugin business logic does not belong in the theme.
 */

:root {
    --pbvm-ink: #242a2d;
    --pbvm-cream: #f3f0e8;
    --pbvm-paper: #faf9f5;
    --pbvm-muted: #6f7475;
    --pbvm-line: rgba(36, 42, 45, 0.18);

    --pbvm-red: #b9362d;
    --pbvm-gold: #d6a72a;
    --pbvm-blue: #334f60;

    --pbvm-content-width: 1180px;
    --pbvm-wide-width: 1400px;

    --pbvm-space-xs: 0.5rem;
    --pbvm-space-sm: 1rem;
    --pbvm-space-md: 2rem;
    --pbvm-space-lg: 4rem;
    --pbvm-space-xl: 7rem;

    --pbvm-radius: 0px;
}

/* The browser's canvas must have an explicit light background.
 * Divi 5's frontend may otherwise expose a dark inherited canvas behind
 * transparent modules, including Registry and Bicycle Details pages.
 * Do not force backgrounds on individual Divi sections: intentional dark
 * homepage sections and the custom footer retain their own backgrounds.
 */
html {
    scroll-behavior: smooth;
    background-color: #ffffff;
}

body {
    color: var(--pbvm-ink);
    background-color: #ffffff;
}

/* White default page surface; explicit module/section colors still win. */
#main-content {
    background-color: #ffffff;
}

.pbvm-container {
    width: min(calc(100% - 40px), var(--pbvm-content-width));
    margin-inline: auto;
}

.pbvm-wide {
    width: min(calc(100% - 40px), var(--pbvm-wide-width));
    margin-inline: auto;
}

.pbvm-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.pbvm-accent-bars {
    display: inline-flex;
    gap: 3px;
    flex: 0 0 auto;
}

.pbvm-accent-bars i {
    display: block;
    width: 13px;
    height: 3px;
}

.pbvm-accent-bars i:nth-child(1) { background: var(--pbvm-red); }
.pbvm-accent-bars i:nth-child(2) { background: var(--pbvm-gold); }
.pbvm-accent-bars i:nth-child(3) { background: var(--pbvm-blue); }

@media (max-width: 767px) {
    :root {
        --pbvm-space-lg: 3rem;
        --pbvm-space-xl: 4.5rem;
    }

    .pbvm-container,
    .pbvm-wide {
        width: min(calc(100% - 30px), var(--pbvm-content-width));
    }
}