/*
 * Thema Verloffabriek — ontwerptokens.
 *
 * De huisstijl (Figma "Verloffabriek — Conceptbriefing"): navy voor vertrouwen,
 * koraal voor actie, papier/zand/mint voor ruimte. Fraunces voor betekenis
 * (koppen, getallen), DM Sans voor uitleg en acties. Ronde kaarten, pilknoppen.
 * Koraal krijgt navy tekst (contrast 5,2:1); koraal als tekst is te licht, dus
 * links en accenttekst gebruiken het donkere koraal (#B23A2B, 5,9:1 op wit).
 */
:root {
    color-scheme: light;

    --vf-font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vf-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --vf-display-settings: "SOFT" 0, "WONK" 1;
    --vf-font-size: .9375rem;
    --vf-control-font-size: .9375rem;
    --vf-line-height: 1.55;
    --vf-heading-weight: 600;
    --vf-heading-tracking: -.01em;
    --vf-page-title-size: 2rem;
    --vf-label-weight: 600;

    --vf-page: #FAF8F3;
    --vf-surface: #FFFFFF;
    --vf-surface-alt: #F5F1EA;
    --vf-border: #E5E0D4;
    --vf-border-strong: #DED4C4;
    --vf-input-border: #D3C8B5;
    --vf-input-disabled-bg: #F5F1EA;

    --vf-text: #17243D;           --vf-text-rgb: 23, 36, 61;
    --vf-heading: #17243D;        --vf-heading-rgb: 23, 36, 61;
    --vf-muted: #4E5A70;

    --vf-primary: #F26B5C;        --vf-primary-rgb: 242, 107, 92;
    --vf-primary-hover: #EC5C4C;
    --vf-primary-active: #DD5848;
    --vf-primary-contrast: #17243D;
    --vf-primary-soft: #FDE7E2;
    --vf-primary-ink: #B23A2B;
    --vf-link: #B23A2B;           --vf-link-rgb: 178, 58, 43;
    --vf-link-hover: #17243D;     --vf-link-hover-rgb: 23, 36, 61;
    --vf-focus-ring: 0 0 0 3px rgba(242, 107, 92, .3);

    --vf-radius-card: 20px;
    --vf-radius-control: 12px;
    --vf-radius-btn: 999px;
    --vf-radius-badge: 999px;
    --vf-radius-pop: 16px;
    --vf-radius-alert: 16px;
    --vf-card-border: 1px;
    --vf-shadow-card: 0 1px 2px rgba(23, 36, 61, .04), 0 12px 32px rgba(23, 36, 61, .05);
    --vf-shadow-pop: 0 24px 48px rgba(23, 36, 61, .12);
    --vf-btn-padding-x: 1.15rem;

    --vf-card-title-size: 1.2rem;
    --vf-table-head-color: #4E5A70;
    --vf-table-border: #EEE8DD;
    --vf-table-stripe: #FBF9F5;
    --vf-table-hover: #FDF1EC;

    --vf-navbar-bg: #FAF8F3;
    --vf-navbar-border: #E5E0D4;
    --vf-navbar-text: #17243D;
    --vf-navbar-text-hover: #B23A2B;

    --vf-sidebar-bg: #17243D;
    --vf-sidebar-text: rgba(250, 247, 242, .74);
    --vf-sidebar-text-hover: #FAF7F2;
    --vf-sidebar-hover-bg: rgba(250, 247, 242, .07);
    --vf-sidebar-active-bg: #F26B5C;
    --vf-sidebar-active-text: #17243D;
    --vf-sidebar-divider: rgba(250, 247, 242, .1);
    --vf-sidebar-brand: #17243D;
    /* Merkvlak in papier: loopt door in de navigatiebalk, het logo blijft zichtbaar. */
    --vf-brand-bg: #FAF8F3;
    --vf-brand-border: #E5E0D4;

    --vf-footer-bg: #FAF8F3;
    --vf-login-bg: #FAF8F3;
    --vf-portal-nav-bg: #17243D;
    --vf-portal-nav-text: rgba(250, 247, 242, .74);
    --vf-portal-nav-text-active: #FAF7F2;

    --vf-success: #1E7A4F; --vf-success-bg: #E6F4EC; --vf-success-ink: #17583A; --vf-success-border: #BAE3CF;
    --vf-info: #2F5E8C;    --vf-info-bg: #E9EEF5;    --vf-info-ink: #1F3B5C;    --vf-info-border: #C9D5E4;
    --vf-warning: #A86A12; --vf-warning-bg: #FBF0D9; --vf-warning-ink: #694409; --vf-warning-border: #EDD7A6;
    --vf-danger: #C2412F;  --vf-danger-bg: #FCE6E0;  --vf-danger-ink: #962F21;  --vf-danger-border: #F5C4B8;

    /* Dashboard-tegels: navy, blush, mint en zand uit het moodboard. */
    --vf-kpi-1-bg: #17243D; --vf-kpi-1-ink: #FAF7F2;
    --vf-kpi-2-bg: #FAD6CC; --vf-kpi-2-ink: #17243D;
    --vf-kpi-3-bg: #BAE3CF; --vf-kpi-3-ink: #17243D;
    --vf-kpi-4-bg: #F2E8D9; --vf-kpi-4-ink: #17243D;
    --vf-kpi-icon: rgba(23, 36, 61, .12);
    --vf-kpi-footer-bg: rgba(23, 36, 61, .06);
    --vf-kpi-footer-hover: rgba(23, 36, 61, .1);
}