/* =============================================================================
   AP-TOKENS.CSS — Design tokens Automotive Partner (herontwerp)
   =============================================================================
   Dit bestand bevat ALLE design-tokens (kleuren, typografie, spacing, radii,
   schaduwen, verlopen, overgangen) uit het ontwerp. Eén bron van waarheid.

   Dit bestand wordt in functions.php ingeladen NA ap-core.css, zodat de nieuwe
   waarden voorrang krijgen. De bestaande schermen blijven gewoon werken; elk
   scherm stapt over op deze tokens zodra het verbouwd wordt.

   Kleurbetekenis is een REGEL, geen versiering:
     groen  = gecontroleerd / direct beschikbaar / succes
     amber  = er wordt iets van je gevraagd (bieding, aandacht)
     rood   = afgesloten / verkocht / opzeggen / destructief
   Nooit voor sier gebruiken.
   ============================================================================= */

/* ===== Inter (self-hosted variabel lettertype, geen externe requests) =====
   Eén variabel bestand dekt alle diktes uit het ontwerp (400/450/500/550/600). */
@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;          /* variabel: hele reeks uit één bestand */
    font-display:swap;
    src:url('../fonts/InterVariable.woff2') format('woff2');
}

:root{
    /* ---- Merk / navy ---- */
    --ap-navy:            #0B2447;   /* sidebar, hero-vlakken */
    --ap-navy-deep:       #081C39;   /* onderkant sidebar-verloop */
    --ap-navy-light:      #102F5E;   /* verloop hero */
    --ap-navy-top:        #123A6B;   /* bovenkant sidebar-verloop */
    --ap-navy-bottom:     #061A34;   /* onderkant sidebar-verloop */

    /* ---- Accent ---- */
    --ap-accent:          #1B4DE4;   /* primaire knop, link, actief */
    --ap-accent-hover:    #143BB0;
    --ap-accent-tint:     #EEF3FE;   /* icoontegels */
    --ap-accent-tint-2:   #F5F8FE;   /* geselecteerde rij, infoblok */
    --ap-accent-border:   #E1E9FA;
    --ap-accent-light:    #9CC0FF;   /* accent op navy */

    /* ---- Grond en oppervlak ---- */
    --ap-page:            #F5F7FB;   /* paginagrond */
    --ap-card:            #FFFFFF;   /* kaart */
    --ap-card-2:          #FDFEFF;
    --ap-card-soft:       #FBFCFE;   /* voetbalk in kaart */
    --ap-hover:           #FAFBFE;   /* rij-hover */

    /* ---- Randen ---- */
    --ap-border:          #E7EBF2;   /* kaartrand */
    --ap-border-soft:     #EEF1F7;   /* scheiding binnen kaart */
    --ap-border-hair:     #F1F4F9;   /* hairline in grid */
    --ap-border-hair-2:   #F5F7FB;   /* hairline in lijst */
    --ap-border-input:    #DDE3ED;
    --ap-border-input-2:  #E2E7F0;
    --ap-border-hover:    #C9D4E6;

    /* ---- Tekst ---- */
    --ap-text:            #0C1F3F;   /* koppen, waarden */
    --ap-text-body:       #3A4A63;   /* lopende tekst */
    --ap-text-body-2:     #42536B;   /* labels */
    --ap-text-soft:       #6B7A93;   /* omschrijving */
    --ap-text-soft-2:     #7A889E;
    --ap-text-muted:      #8B99AE;   /* meta, kicker */
    --ap-text-muted-2:    #93A2B8;   /* icoon */
    --ap-text-faint:      #A6B2C4;   /* placeholder */
    --ap-text-faint-2:    #B3BFD1;   /* chevron */

    /* ---- Tekst op navy ---- */
    --ap-on-navy:         #FFFFFF;
    --ap-on-navy-body:    #A9BDDD;
    --ap-on-navy-meta:    #8FA8D4;
    --ap-on-navy-kicker:  #7FA0DA;
    --ap-on-navy-lead:    #C3D3EC;
    --ap-on-navy-2:       #BACBE6;

    /* ---- Sidebar ---- */
    --ap-side-text:       #A9BBD8;
    --ap-side-icon:       #8FA5C8;
    --ap-side-group:      #6B82A8;
    --ap-side-foot:       #8FA5C8;

    /* ---- Status: groen (geverifieerd / beschikbaar / succes) ---- */
    --ap-green:           #2FA96B;
    --ap-green-text:      #1B7A4B;
    --ap-green-text-2:    #14603C;
    --ap-green-tint:      #E9F8EF;
    --ap-green-tint-2:    #EFFAF3;
    --ap-green-border:    #CDEEDC;
    --ap-green-light:     #5FD99A;   /* op navy */

    /* ---- Status: amber (er wordt iets gevraagd / aandacht) ---- */
    --ap-amber:           #E0A800;
    --ap-amber-text:      #8A6100;
    --ap-amber-text-2:    #7A5B14;
    --ap-amber-tint:      #FFF6E5;
    --ap-amber-tint-2:    #FFF9EC;
    --ap-amber-border:    #F2DFB0;
    --ap-amber-light:     #F0C244;   /* op navy */

    /* ---- Status: rood (verkocht / opzeggen / destructief) ---- */
    --ap-red:             #B0403A;
    --ap-red-tint:        #FBE9E7;
    --ap-red-tint-2:      #FDF4F4;
    --ap-red-border:      #E3B8B4;
    --ap-red-border-2:    #EFD3D0;

    /* ---- Kentekenplaat ---- */
    --ap-plate-bg:        #F6C700;
    --ap-plate-border:    #D8B400;
    --ap-plate-text:      #1A1A00;

    /* ---- Lettertype ---- */
    --ap-font:            'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ---- Spacing (4px-basis) ---- */
    --ap-space-1:   4px;
    --ap-space-2:   8px;
    --ap-space-3:   12px;
    --ap-space-4:   16px;
    --ap-space-5:   20px;    /* kaartpadding */
    --ap-space-6:   24px;
    --ap-space-8:   32px;    /* paginamarge desktop */
    --ap-space-12:  48px;
    --ap-space-14:  56px;    /* sectie-afstand magazine */

    /* ---- Radii ---- */
    --ap-radius-card:    14px;   /* standaard kaart */
    --ap-radius-card-l:  16px;   /* grote kaart, magazine, modaal */
    --ap-radius-btn-s:   8px;
    --ap-radius-btn:     9px;
    --ap-radius-btn-l:   11px;
    --ap-radius-input:   10px;
    --ap-radius-tile:    9px;    /* icoontegel 34px */
    --ap-radius-tile-l:  11px;   /* icoontegel 38-46px */
    --ap-radius-nav:     10px;   /* menu-item */
    --ap-radius-plate:   5px;    /* kentekenplaat */
    --ap-radius-pill:    999px;

    /* ---- Schaduwen ---- */
    --ap-shadow-card:       0 1px 1px rgba(16,35,64,.03), 0 8px 24px -20px rgba(16,35,64,.45);
    --ap-shadow-card-hover: 0 2px 4px rgba(16,35,64,.05), 0 14px 30px -20px rgba(16,35,64,.6);
    --ap-shadow-card-l:     0 1px 2px rgba(16,35,64,.04), 0 14px 34px -24px rgba(16,35,64,.55);
    --ap-shadow-navy:       0 1px 2px rgba(11,36,71,.10), 0 12px 32px -18px rgba(11,36,71,.55), inset 0 1px 0 rgba(255,255,255,.08);
    --ap-shadow-btn-hover:  0 2px 10px rgba(27,77,228,.24);
    --ap-shadow-modal:      0 24px 60px -20px rgba(11,31,63,.45);

    /* ---- Verlopen ---- */
    --ap-grad-sidebar:    linear-gradient(168deg,#123A6B 0%,#0B2447 38%,#08203E 72%,#061A34 100%);
    --ap-grad-hero:       linear-gradient(115deg,#0B2447 0%,#102F5E 58%,#0D2750 100%);
    --ap-grad-hero-glow:  radial-gradient(620px 220px at 84% -40%, rgba(76,123,255,.30), transparent 72%);
    --ap-grad-card:       linear-gradient(180deg,#FFFFFF 0%,#FDFEFF 100%);
    --ap-grad-page:       radial-gradient(900px 320px at 18% -8%, rgba(27,77,228,.045), transparent 70%);
    --ap-grad-nav-active: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.05));

    /* ---- Overgangen ---- */
    --ap-t-fast:  .15s;   /* kleur, achtergrond, rand */
    --ap-t-card:  .18s;   /* kaart-hover, met transform: translateY(-1px) */
    --ap-t-menu:  .22s ease;   /* menu in-/uitklappen */
}

/* ===== Basis: lettertype-rendering en nette tekstafbreking ===== */
body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,dd,dt{
    text-wrap:pretty;
}

/* ===== Toetsenbord-focus: altijd zichtbaar (toegankelijkheid, verplicht) =====
   Verschijnt alleen bij navigeren met het toetsenbord, niet bij muisklik.
   Invoervelden met een eigen focus-stijl blijven ongemoeid (hogere specificiteit). */
:focus-visible{
    outline:2px solid var(--ap-accent);
    outline-offset:2px;
    border-radius:6px;
}