/* v982: huisstijl-fundament — design-tokens.
 *
 * Eén bron voor kleuren, radius, schaduw en typografie, zodat de
 * landing-restyling (v983/v984) en de definitieve merknaam/het
 * logo in één keer overal doorwerken.
 *
 * v1080: Dayporto (brandbook Direction C). Deep Navy #0A2239 als
 * basis, Dayporto Orange #FF5A1F uitsluitend als actiekleur
 * (verhouding 70% neutraal / 20% navy / 10% orange), Success
 * Mint voor trust/succes en Warm Cream als zacht sectievlak.
 * Contrast op wit: navy #0A2239 ≈ 15:1, orange #FF5A1F op wit
 * alleen voor grote knoppen/accenten (v538-regel blijft: lopende
 * tekst nooit in oranje).
 *
 * Gebruik in templates/CSS: var(--merk-primair) enzovoort.
 * De bestaande style.css blijft leidend voor de app-schermen;
 * deze tokens zijn additief en breken niets.
 */

/* Inter (brandbook-typografie) via jsdelivr — de enige CDN die de
 * CSP voor styles én fonts toestaat. Fallback-stack staat in
 * --merk-font, dus zonder CDN blijft alles leesbaar. */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/caveat@5.2.5/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/caveat@5.2.5/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.2.5/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.2.5/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.2.5/700.css');

:root {
    /* Merkkleuren — Dayporto Direction C */
    --merk-primair: #0A2239;          /* Deep Navy */
    --merk-primair-donker: #071A2C;
    --merk-primair-licht: #E9EEF4;
    --merk-lucht: #FFF7F2;            /* Warm Cream — hero-/sectievlak */
    --merk-actie: #FF5A1F;            /* Dayporto Orange — CTA's */
    --merk-actie-donker: #E64D15;
    --merk-koraal: #FF7A45;           /* Warm Coral — zachte accenten */
    --merk-accent: #17A57F;           /* Success Mint (donkerder voor
                                         4,5:1-contrast op wit; badges
                                         op mint-licht gebruiken 'm ook) */
    --merk-accent-licht: #E4F9F2;

    /* Signaal */
    --merk-waarschuwing: #d97706;
    --merk-gevaar: #dc2626;

    /* Neutralen */
    --merk-inkt: #102A43;             /* Ink */
    --merk-mist: #F3F5F7;             /* Mist — app-/tabelvlakken */
    --merk-tekst: #374151;
    --merk-grijs: #6b7280;
    --merk-vlak: #f5f7fa;
    --merk-rand: #e5e7eb;
    --merk-wit: #ffffff;

    /* Vorm */
    --merk-radius: 12px;
    --merk-radius-klein: 8px;
    --merk-schaduw: 0 1px 3px rgba(17, 24, 39, .08);
    --merk-schaduw-zweef: 0 10px 25px rgba(17, 24, 39, .12);

    /* Typografie */
    --merk-font: 'Inter', system-ui, -apple-system, 'Segoe UI',
                 Roboto, sans-serif;
    /* v1091: handgeschreven accent-font uit het brandbook */
    --merk-handschrift: 'Caveat', 'Segoe Script', 'Bradley Hand',
                        cursive;
}

/* Basishulpen voor de publieke pagina's (landing, security,
 * juridisch, status) — de app-schermen houden hun eigen stijl. */
.merk-knop-primair {
    /* v1080: primaire actie = Dayporto Orange (brandbook: orange
     * uitsluitend voor CTA's en actieve status). */
    background: var(--merk-actie);
    border: 1px solid var(--merk-actie);
    color: var(--merk-wit);
    border-radius: var(--merk-radius-klein);
    padding: .6rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background .15s ease;
}
.merk-knop-primair:hover {
    background: var(--merk-actie-donker);
    border-color: var(--merk-actie-donker);
    color: var(--merk-wit);
}
.merk-kaart {
    background: var(--merk-wit);
    border: 1px solid var(--merk-rand);
    border-radius: var(--merk-radius);
    box-shadow: var(--merk-schaduw);
}
.merk-badge-trust {
    background: var(--merk-accent-licht);
    color: var(--merk-accent);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    display: inline-block;
}

/* v1057: gedeelde stijl voor álle publieke pagina's (juridisch,
 * security, status, contact, aanmeld-wizard), zodat de hele
 * site één gezicht heeft. De navbar is licht met staalblauwe
 * accenten; de oude zwarte bg-dark-balken zijn verdwenen. */
.merk-publiek {
    color: var(--merk-tekst);
    background: var(--merk-wit);
}
.merk-publiek main a {
    color: var(--merk-primair);
}
.merk-publiek .btn-primary {
    background: var(--merk-primair);
    border-color: var(--merk-primair);
}
.merk-publiek .btn-primary:hover,
.merk-publiek .btn-primary:focus {
    background: var(--merk-primair-donker);
    border-color: var(--merk-primair-donker);
}
.merk-publiek .btn-outline-primary {
    color: var(--merk-primair);
    border-color: var(--merk-primair);
}
.merk-publiek .btn-outline-primary:hover,
.merk-publiek .btn-outline-primary:focus {
    background: var(--merk-primair);
    border-color: var(--merk-primair);
    color: var(--merk-wit);
}
.merk-nav {
    background: var(--merk-wit);
    border-bottom: 1px solid var(--merk-rand);
    box-shadow: var(--merk-schaduw);
}
.merk-nav .navbar-brand {
    color: var(--merk-inkt);
    font-weight: 700;
}
.merk-nav a {
    color: var(--merk-grijs);
    text-decoration: none;
}
.merk-nav a:hover,
.merk-nav a.fw-bold {
    color: var(--merk-primair);
}
.merk-hero-licht {
    background: linear-gradient(165deg, #f8fafd 0%,
        var(--merk-lucht) 55%, #e9eff7 100%);
    border-bottom: 1px solid var(--merk-rand);
    color: var(--merk-inkt);
}
.merk-chip {
    background: var(--merk-primair-licht);
    color: var(--merk-primair);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    display: inline-block;
}

/* ── v1091: grafische vormgevingslaag (brandbook/mockups) ─────
 * Warme organische vormen, handgeschreven accenten en de oranje
 * kicker — puur CSS/inline-SVG, dus CSP-veilig. */
.merk-kicker {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    font-size: .8rem;
    color: var(--merk-actie);
}
.merk-handschrift {
    font-family: var(--merk-handschrift);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.15;
    transform: rotate(-3deg);
    display: inline-block;
}
.merk-decor { position: relative; overflow: hidden; }
.merk-decor > * { position: relative; z-index: 1; }
.merk-blob {
    position: absolute;
    z-index: 0 !important;
    pointer-events: none;
    border-radius: 62% 38% 55% 45% / 55% 45% 55% 45%;
}
.merk-blob--warm {
    background: linear-gradient(135deg, #FFE3D6 0%, #FF9A6B 100%);
    opacity: .45;
}
.merk-blob--koraal {
    /* zachte oranje gloed — leesbaar op donkere (navy) vlakken */
    background: radial-gradient(circle at 35% 35%,
        rgba(255, 122, 69, .55) 0%, rgba(255, 90, 31, 0) 68%);
    border-radius: 50%;
}
.merk-blob--cream { background: #FFF0E6; opacity: .8; }
.merk-zwiep { display: block; margin-top: .35rem; }
.merk-zwiep path {
    stroke: var(--merk-actie);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
}