:root {
    /*
     * PVDB Computers starter tokens.
     * Dit zijn neutrale basiswaarden. Klant-specifieke kleuren en details
     * horen later in assets/site/css/site.css.
     */

    /* Colors */
    --color-primary: #1f4f7a;
    --color-primary-dark: #173a59;
    --color-primary-light: #e8f1f8;

    --color-secondary: #f2a93b;
    --color-secondary-dark: #c88420;
    --color-secondary-light: #fff4df;

    --color-text: #1f2933;
    --color-muted: #64748b;
    --color-heading: #111827;

    --color-background: #ffffff;
    --color-surface: #f8fafc;
    --color-border: #d9e2ec;

    --color-white: #ffffff;
    --color-black: #000000;

    /* Typography */
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.9375rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.375rem;
    --font-size-xl: 1.75rem;
    --font-size-2xl: 2.25rem;
    --font-size-3xl: 3rem;

    --line-height-base: 1.65;
    --line-height-heading: 1.15;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 6rem;

    /* Layout */
    --container-narrow: 760px;
    --container-default: 1180px;
    --container-wide: 1360px;
    --container-padding: 1.25rem;

    --module-padding: var(--space-3xl);
    --module-padding-large: var(--space-4xl);

    /* UI */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 16px 36px rgba(15, 23, 42, 0.12);

    --transition-base: 180ms ease;
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --module-padding: var(--space-2xl);
        --module-padding-large: var(--space-3xl);
    }
}