/*
 * variables.css — equisan Design Tokens
 * Pas deze sectie aan per project.
 * Alle utility classes in utilities.css refereren hieraan.
 */

:root {

    /* ===========================
       KLEUREN — BRAND
       =========================== */
    --color-primary:      #714A3A;
    --color-primary-dark: #5a3a2c;
    --color-on-primary:   #ffffff;  /* tekst OP primary knop */
    --color-secondary:    rgba(113, 74, 58, 0.05);
    --color-accent:       #714A3A;
    --color-light:        #EEEDEC;

    /* ===========================
       KLEUREN — TEKST
       =========================== */
    --color-text:         #000000;
    --color-text-light:   rgba(0, 0, 0, 0.7);
    --color-text-muted:   rgba(0, 0, 0, 0.4);

    /* ===========================
       KLEUREN — ACHTERGROND
       =========================== */
    --color-bg:           #EEEDEC;
    --color-bg-gray:      rgba(113, 74, 58, 0.05);
    --color-dark:         #1a1a1a;

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

    /* ===========================
       KLEUREN — BASIS
       =========================== */
    --color-border:       rgba(113, 74, 58, 0.15);
    --color-white:        #ffffff;
    --color-black:        #000000;

    /* ===========================
       TYPOGRAFIE
       =========================== */
    --font-primary:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading:       'Poiret One', sans-serif;
    --font-accent:        'Poiret One', sans-serif;
    --font-mono:          'Inter', monospace;

    /* ===========================
       LAYOUT
       =========================== */
    --container-width:    1800px;
    --header-height:      80px;

    /* ===========================
       VLOEIENDE SPACING
       Schaalt automatisch tussen mobiel en desktop.
       =========================== */
    --spacing-x: max(24px, min(calc(0.1063829787 * (100vw - 37.5em) + 24px), 72px));
    --spacing-y: max(80px,  min(calc(0.1084       * (100vw - 37.5em) + 80px),  160px));

    /* ===========================
       SCHADUWEN
       =========================== */
    --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.08);
    --shadow-md:  0 4px 12px -1px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.06);
    --shadow-lg:  0 10px 24px -3px rgb(0 0 0 / 0.12), 0 4px 10px -4px rgb(0 0 0 / 0.08);
    --shadow-xl:  0 20px 40px -5px rgb(0 0 0 / 0.15), 0 8px 16px -6px rgb(0 0 0 / 0.1);

    /* ===========================
       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;
}