/*
 Theme Name: Stuwit Core Child
 Template: stuwit-core/theme
*/

@font-face {
    font-family: 'Geist';
    src: url('geist/Geist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('geist/Geist-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


:root {
    --site-font-family: "Geist";
    --font-display: "Geist", sans-serif;
    --font-sans: "Geist", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* ============================================================
       Brand palette — Electronic BV
       brand-1  Blauw (primair, logo)
       brand-2  Paars (accent, logo)
       brand-3  Donker (tekst, headings, inverse secties)
       ============================================================ */
    --brand-1: #124B8E;   /* blauw */
    --brand-2: #0D75B1;   /* paars */
    --brand-3: #121618;   /* donker */

    /* Semantic tokens (gebruik deze in components/utilities) */
    --color-primary: var(--brand-1);
    --color-secondary: var(--brand-2);
    --color-accent: var(--brand-2);

    --color-foreground: var(--brand-3);
    --color-muted: #6B7280;
    --color-muted-80: #4B5563;
    --color-prose-body: var(--color-muted-80);
    --color-prose-invert-body: color-mix(in srgb, var(--color-background) 82%, transparent);
    --color-prose-invert-captions: color-mix(in srgb, var(--color-background) 72%, transparent);
    --color-prose-invert-border: color-mix(in srgb, var(--color-background) 28%, transparent);
    --color-background: #f0f3f7;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f7ff;
    --color-border: #E2E8F0;
    --color-heading-default: var(--brand-3);
    --color-heading-inverse: #ffffff;

    /* Backward-compat aliases */
    --color-dark: var(--brand-3);

    /* Typography plugin */
    --tw-prose-body: var(--color-foreground);
    --tw-prose-invert-body: var(--color-background);

    /* Standaard section-tokens (lichte achtergrond als default) */
    --section-bg: var(--color-surface);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-3);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-3);
    --section-eyebrow-accent: var(--brand-1);
}

.eyebrow::before {
    background-image: conic-gradient(
        from 35deg,
        transparent 0deg 22deg,
        var(--section-eyebrow-accent, var(--color-foreground)) 22deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent 52%, #fff 53%);
    mask: radial-gradient(farthest-side, transparent 52%, #fff 53%);
    background-color: transparent;
    border: none;
    transform: none;
    width: 0.6rem;
    height: 0.6rem;
}

.btn.bg-gradient-brand:hover {
    filter: brightness(1.1);
}

footer .prose a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.65);
    transition: color 200ms ease;
}
footer .prose a:hover {
    color: #ffffff;
}

.bg-gradient-brand {
    background-image: linear-gradient(135deg, #071828 0%, #1A64CC 100%);
    --section-bg: var(--brand-1);
    --section-fg: rgba(255, 255, 255, 0.88);
    --section-heading: #ffffff;
    --section-muted: rgba(255, 255, 255, 0.70);
    --section-border: rgba(255, 255, 255, 0.20);
    --section-border-strong: rgba(255, 255, 255, 0.45);
    --section-link: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.75);
    --section-eyebrow-accent: #ffffff;
    color: var(--section-fg);
}