/*
 * variables.css — Piconisseur Design Tokens
 * Bron: .claude/agents/piconisseur-brand.md
 * Alle utility classes in utilities.css refereren hieraan.
 *
 * Anton (titels) en Poppins (body) worden via Google Fonts geladen,
 * zie inc/enqueue.php.
 */

:root {

    /* ===========================
       KLEUREN — BRAND (primair, app-UI)
       =========================== */
    --color-primary:      #E5431A; /* accent — hoofdkleur oranje */
    --color-primary-dark: #C23510; /* accent-dark — shadows, hover */
    --color-secondary:    #1A1A1A; /* black — bijna-zwart */
    --color-accent:       #FDE8E2; /* accent-light — achtergronden, focus */
    --color-light:        #EFE3DE; /* page-bg — warm crème paginakleur */

    /* ===========================
       KLEUREN — SECUNDAIR (marketing/social, niet in app-UI)
       =========================== */
    --color-olive:        #6B7A3D; /* onderstrepingen, accenten — hex nog verifiëren met designbestand */
    --color-mustard:      #E8A73B; /* sterretjes, uitroeptekens — hex nog verifiëren met designbestand */

    /* ===========================
       KLEUREN — TEKST
       =========================== */
    --color-text:         #1A1A1A;
    --color-text-light:   #C7C7C7;
    --color-text-muted:   #6b7280;

    /* ===========================
       KLEUREN — ACHTERGROND
       =========================== */
    --color-bg:           #ffffff;
    --color-bg-gray:      #F1F1F1;
    --color-dark:         #1A1A1A;

    /* ===========================
       KLEUREN — SEMANTISCH
       =========================== */
    --color-error:        #ef4444;
    --color-success:      #10b981;
    --color-warning:      #f59e0b;
    --color-info:         #06b6d4;

    /* ===========================
       KLEUREN — BASIS
       =========================== */
    --color-border:       #e5e7eb;
    --color-white:        #ffffff;
    --color-black:        #1A1A1A;

    /* ===========================
       TYPOGRAFIE
       =========================== */
    --font-primary:       'Poppins', sans-serif;
    --font-heading:       'Anton', sans-serif;
    --font-accent:        'Anton', sans-serif;
    --font-mono:          'Courier New', monospace;

    /* ===========================
       LAYOUT
       =========================== */
    --container-width:    1800px;
    --header-height:      80px; /* Pas aan per project */

    /* ===========================
       VLOEIENDE SPACING
       Schaalt automatisch tussen mobiel en desktop.
       Gebruik deze variabelen in project-CSS voor
       consistente ritmische witruimte.
       =========================== */
    --spacing-x: max(24px, min(calc(0.1063829787 * (100vw - 37.5em) + 24px), 72px));
    --spacing-y: max(98px,  min(calc(0.1084       * (100vw - 37.5em) + 98px),  220px));

    /* ===========================
       SCHADUWEN
       =========================== */
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Merkspecifiek — sticker/bubbly stijl (zie piconisseur-brand.md) */
    --shadow-card:    0 2px 0 rgb(0 0 0 / 1); /* losstaande kaarten */
    --shadow-sticker: 0 0 0 2px var(--color-white), 0 0 0 3.5px var(--color-primary); /* sticker-outline effect */

    /* ===========================
       BORDER RADIUS
       =========================== */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    /* ===========================
       ANIMATIES
       =========================== */
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --duration-100:  100ms;
    --duration-150:  150ms;
    --duration-200:  200ms;
    --duration-300:  300ms;
    --duration-500:  500ms;
    --duration-700:  700ms;
    --duration-1000: 1000ms;

    --transition-fast:  150ms var(--ease-out);
    --transition:       300ms var(--ease-in-out);
    --transition-slow:  500ms var(--ease-in-out);

    /* ===========================
       Z-INDEX SCHAAL
       =========================== */
    --z-base:           0;
    --z-dropdown:       10;
    --z-sticky:         20;
    --z-fixed:          30;
    --z-modal-backdrop: 40;
    --z-modal:          50;
    --z-tooltip:        60;
}