/*
 * BPV Boekje Base token layer.
 *
 * The semantic --bpv-ui-* contract below is the canonical BPV contract shared
 * with component plugins. Light mode is the safe default. Dark mode follows
 * the browser/operating-system preference through prefers-color-scheme.
 */

/* Layout and spacing tokens owned by the theme. */
:root {
    --bpv-page-gutter: 1rem;
    --bpv-content-width: 50rem;
    --bpv-full-width: 75rem;
    --bpv-layout-sidebar-min: 16rem;
    --bpv-layout-sidebar-max: 25rem;

    /* Branding typography: compact on mobile, fluid alongside the desktop sidebar. */
    --bpv-site-title-mobile-size: 1.05rem;
    --bpv-site-branding-size-min: 1.25rem; /* 20px at the default root size. */
    --bpv-site-branding-size-max: 1.75rem; /* 28px at the default root size. */
    --bpv-site-branding-size-fluid: clamp(
        var(--bpv-site-branding-size-min),
        calc(0.361rem + 1.389vw),
        var(--bpv-site-branding-size-max)
    );

    /* Tagline stays quieter than the title and grows only from 16px to 18px. */
    --bpv-site-description-size-min: 1rem;
    --bpv-site-description-size-max: 1.125rem;
    --bpv-site-description-size-fluid: clamp(
        var(--bpv-site-description-size-min),
        calc(0.778rem + 0.347vw),
        var(--bpv-site-description-size-max)
    );

    /* Login status is secondary branding text and scales from 14px to 18px. */
    --bpv-site-login-size-min: 0.875rem;
    --bpv-site-login-size-max: 1.125rem;

    --bpv-space-1: 0.25rem;
    --bpv-space-2: 0.5rem;
    --bpv-space-3: 0.75rem;
    --bpv-space-4: 1rem;
    --bpv-space-5: 1.5rem;
    --bpv-space-6: 2rem;
    --bpv-space-7: 3rem;
    --bpv-space-8: 4rem;

    --bpv-radius: 0;
    --bpv-shadow: none;
}

/**
 * Central BPV semantic design-token contract.
 *
 * Light mode is the safe default. Dark mode is selected automatically by the
 * browser/operating-system preference through prefers-color-scheme.
 * Component plugins consume these variables and keep their own scoped CSS.
 */
:root {
    color-scheme: light;
    --bpv-ui-page-bg: #ffffff;
    --bpv-ui-surface: #ffffff;
    --bpv-ui-subtle-bg: #f8fafc;
    --bpv-ui-field-bg: #ffffff;
    --bpv-ui-text: #1f2937;
    --bpv-ui-muted: #4b5563;
    --bpv-ui-control-border: #94a3b8;
    --bpv-ui-structure: #52bcce;
    --bpv-ui-selection: #b8d836;
    --bpv-ui-info-surface: #1d4ed8;
    --bpv-ui-info-surface-hover: #1e40af;
    --bpv-ui-active: #1d4ed8;
    --bpv-ui-error-bg: #fdebed;
    --bpv-ui-error-border: #c94b55;
    --bpv-ui-error-text: #8a1f2a;
    --bpv-ui-success-bg: #e7f6eb;
    --bpv-ui-success-border: #0f7a34;
    --bpv-ui-success-text: #0f7a34;
}

/*
 * Theme-level semantic extensions. These do not replace the central contract;
 * they map site chrome and WordPress presentation onto that contract.
 */
:root {
    --bpv-ui-divider: #e5e7eb;
    --bpv-ui-link: var(--bpv-ui-info-surface);
    --bpv-ui-on-bright-accent: #111827;

    --bpv-ui-site-nav-bg: var(--bpv-ui-structure);
    --bpv-ui-site-nav-text: #000000;
    --bpv-ui-site-nav-muted: #334155;
    --bpv-ui-site-nav-divider: rgba(0, 0, 0, 0.24);
    --bpv-ui-site-nav-control-border: #111827;
    --bpv-ui-site-nav-focus: #111827;
    --bpv-ui-site-nav-hover-bg: rgba(0, 0, 0, 0.08);
    --bpv-ui-site-nav-action-bg: #111827;
    --bpv-ui-site-nav-action-hover: #334155;
    --bpv-ui-site-nav-action-text: #ffffff;

    /* Defaults; the Customizer may override these three tokens inline. */
    --bpv-ui-action-bg: var(--bpv-ui-info-surface);
    --bpv-ui-action-hover: var(--bpv-ui-info-surface-hover);
    --bpv-ui-action-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bpv-ui-page-bg: #0f172a;
        --bpv-ui-surface: #111827;
        --bpv-ui-subtle-bg: #1f2937;
        --bpv-ui-field-bg: #0b1220;
        --bpv-ui-text: #f8fafc;
        --bpv-ui-muted: #94a3b8;
        --bpv-ui-control-border: #64748b;
        --bpv-ui-structure: #52bcce;
        --bpv-ui-selection: #b8d836;
        --bpv-ui-info-surface: #2563eb;
        --bpv-ui-info-surface-hover: #2f6be6;
        --bpv-ui-active: #60a5fa;
        --bpv-ui-error-bg: #3b161d;
        --bpv-ui-error-border: #f87171;
        --bpv-ui-error-text: #fecaca;
        --bpv-ui-success-bg: #102a1b;
        --bpv-ui-success-border: #4ade80;
        --bpv-ui-success-text: #bbf7d0;
    }

    :root {
        --bpv-ui-divider: #334155;
        --bpv-ui-link: #93c5fd;

        /*
         * The site navigation is a branded surface, not a generic content
         * surface. Keep the BPV turquoise identity in dark mode with the
         * established dark-turquoise counterpart used by BPV-boekje.
         */
        --bpv-ui-site-nav-bg: #155866;
        --bpv-ui-site-nav-text: var(--bpv-ui-text);
        --bpv-ui-site-nav-muted: #cbd5e1;
        --bpv-ui-site-nav-divider: rgba(255, 255, 255, 0.28);
        --bpv-ui-site-nav-control-border: #94a3b8;
        --bpv-ui-site-nav-focus: var(--bpv-ui-active);
        --bpv-ui-site-nav-hover-bg: rgba(255, 255, 255, 0.08);
        --bpv-ui-site-nav-action-bg: var(--bpv-ui-structure);
        --bpv-ui-site-nav-action-hover: #7dd3df;
        --bpv-ui-site-nav-action-text: var(--bpv-ui-on-bright-accent);

        /* Defaults; the Customizer may override these three tokens inline. */
        --bpv-ui-action-bg: var(--bpv-ui-info-surface);
        --bpv-ui-action-hover: var(--bpv-ui-info-surface-hover);
        --bpv-ui-action-text: #ffffff;
    }
}

@media (min-width: 48rem) {
    :root {
        --bpv-page-gutter: 1.5rem;
    }
}