/*
 * LarsaSub huisstijl — dual-mode design tokens (F0, gekozen 2026-08-22:
 * Interval-dial-concept in het Cycle-palet). Dit bestand is de énige bron
 * voor kleur en typografie: site, portal, checkout en (via larsasub's
 * email_theme/theme_view) de package-onderdelen lezen deze tokens.
 *
 * Themapatroon: light is de basis, @media prefers-color-scheme dekt de
 * systeemvoorkeur, en de data-theme-attributen (handmatige switch) winnen
 * in beide richtingen.
 */

@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-var.woff2') format('woff2');
    font-weight: 300 700;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
    font-weight: 100 800;
    font-display: swap;
}

:root {
    /* merk */
    --brand-blue: #3D6BF3;
    --brand-violet: #6C4FE0;
    --brand-gradient: linear-gradient(120deg, var(--brand-blue), var(--brand-violet));

    /* typografie */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* light (basis) */
    --bg: #F7F8FB;
    --surface: #FFFFFF;
    --surface-2: #EFF2F8;
    --edge: #E2E6F0;
    --ink: #131B31;
    --ink-sub: #5A6580;
    --accent: #4459E8;
    --accent-ink: #FFFFFF;
    --success: #18A57A;
    --success-soft: #DDF3EB;
    --warn: #B77414;
    --warn-soft: #FBEFDA;
    --danger: #C2453C;
    --danger-soft: #F9E4E2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0C1122;
        --surface: #141B30;
        --surface-2: #1A2340;
        --edge: #27304C;
        --ink: #E8ECF7;
        --ink-sub: #93A0BC;
        --accent: #6D7FFF;
        --accent-ink: #0C1122;
        --success: #2BD695;
        --success-soft: #12352A;
        --warn: #E5A45C;
        --warn-soft: #3A2712;
        --danger: #EF7A72;
        --danger-soft: #3D1F1D;
    }
}
:root[data-theme="dark"] {
    --bg: #0C1122;
    --surface: #141B30;
    --surface-2: #1A2340;
    --edge: #27304C;
    --ink: #E8ECF7;
    --ink-sub: #93A0BC;
    --accent: #6D7FFF;
    --accent-ink: #0C1122;
    --success: #2BD695;
    --success-soft: #12352A;
    --warn: #E5A45C;
    --warn-soft: #3A2712;
    --danger: #EF7A72;
    --danger-soft: #3D1F1D;
}
:root[data-theme="light"] {
    --bg: #F7F8FB;
    --surface: #FFFFFF;
    --surface-2: #EFF2F8;
    --edge: #E2E6F0;
    --ink: #131B31;
    --ink-sub: #5A6580;
    --accent: #4459E8;
    --accent-ink: #FFFFFF;
    --success: #18A57A;
    --success-soft: #DDF3EB;
    --warn: #B77414;
    --warn-soft: #FBEFDA;
    --danger: #C2453C;
    --danger-soft: #F9E4E2;
}