/**
 * LIJSTJESTIJD UI — TOKENS
 * De basiswaarden van de nieuwe stijl. Nieuwe componenten (lt.css) en features gebruiken enkel deze variabelen,
 * zodat een kleur, afronding of animatie op één plek aangepast wordt.
 * Documentatie: docs/ui.md
 */
:root {
    /* merkkleuren */
    --lt-navy: #0C233E;
    --lt-green: #4DE183;
    --lt-green-dark: #4DD67F;
    --lt-pink: #E62D54;
    --lt-coral: #FF5B48;
    --lt-coral-light: #FE6F5F;
    --lt-rose: #F5456A;
    --lt-blue: #4052ED;          /* primaire actiekleur (knoppen, links), gelijk aan --ltd-color-primary */
    --lt-blue-hover: #3B4CE2;
    --lt-blue-glow: rgba(64, 82, 237, .3);

    /* neutrale kleuren */
    --lt-white: #FFFFFF;
    --lt-surface: #F8F9FA;      /* lichte achtergrond, bv. placeholders */
    --lt-line: #EFEFEF;         /* scheidingslijnen */
    --lt-border: #D9DEE4;       /* randen van knoppen/velden */
    --lt-subtle: #F1F3F5;       /* chips, neutrale pillen */
    --lt-subtle-hover: #E6E9EC;
    --lt-faint: #9AA5B1;        /* iconen, placeholders (niet voor tekst) */
    --lt-muted: #4A5A6C;        /* secundaire tekst (4.5:1 op wit) */
    --lt-mint: #EAFBF1;         /* zachte accentachtergrond */
    --lt-mint-dark: #D7F7E3;    /* hover op mint */
    --lt-green-ink: #17864A;    /* groen voor iconen/tekst op mint */
    --lt-coral-soft: #FFEDEA;   /* zachte koraal achtergrond */
    --lt-blue-soft: #ECEEFD;    /* zachte blauwe achtergrond */
    --lt-danger: #C7321F;       /* destructieve acties (afmelden, verwijderen), 5:1 op wit */
    --lt-glass: rgba(255, 255, 255, .82);  /* doorschijnend wit met blur (bovenbalk bij scrollen) */

    /* merkkleur van een externe dienst: WhatsApp-knop (donkerder dan het officiële groen, zodat witte tekst leesbaar is) */
    --lt-whatsapp: #1A8D4C;
    --lt-whatsapp-hover: #157A41;
    --lt-whatsapp-soft: #E7F8EE;

    /* afronding */
    --lt-radius-sm: 10px;
    --lt-radius: 14px;
    --lt-radius-lg: 20px;
    --lt-radius-pill: 999px;

    /* schaduw */
    --lt-shadow-sm: 0 2px 8px rgba(12, 35, 62, .2);
    --lt-shadow-card: 0 1px 2px rgba(12, 35, 62, .04), 0 8px 24px rgba(12, 35, 62, .06);
    --lt-shadow-card-hover: 0 2px 4px rgba(12, 35, 62, .05), 0 14px 32px rgba(12, 35, 62, .10);
    --lt-shadow: 0 8px 24px rgba(12, 35, 62, .18);
    --lt-shadow-lg: 0 24px 60px rgba(12, 35, 62, .22), 0 0 0 1px rgba(12, 35, 62, .05);

    /* overlays */
    --lt-backdrop: rgba(12, 35, 62, .35);
    --lt-scrim: linear-gradient(to top, rgba(12, 35, 62, .88) 0%, rgba(12, 35, 62, .45) 38%, rgba(12, 35, 62, 0) 65%);

    /* beweging */
    --lt-ease-out: cubic-bezier(.2, .8, .2, 1);
    --lt-ease-spring: cubic-bezier(.2, .9, .25, 1.04);

    /* AI / "magische" accenten */
    --lt-ai-ring: conic-gradient(from 0deg, #4DE183, #0C233E 22%, #0C233E 30%, #E62D54 48%, #FF5B48 64%, #F5456A 80%, #4DE183);
    --lt-ai-aura: conic-gradient(from 0deg, #4DE183, #4DD67F 20%, #FE6F5F 45%, #E62D54 65%, #F5456A 80%, #4DE183);
    --lt-ai-strip: linear-gradient(90deg, #4DE183, #FE6F5F, #E62D54, #F5456A);
}