/* ============================================================
   DESIGN TOKENS – KLANKKAMER
   ------------------------------------------------------------
   Centrale variabelen voor kleuren, spacing, radius en controls
   In FASE 1 worden deze nog NIET overal gebruikt.
   ============================================================ */

:root {

    /* ===== Brand ===== */
    --color-primary: #2563eb;
    --color-primary-dark: #1e40af;

    --color-platform-dark: #232f59;
    /* landing test blauw */
    --color-platform-accent: #fb923c;
    /*1aa6a6/
    /* turquoise */

    /* ===== Neutrals ===== */
    --gray-50: #f4f5f7;
    --gray-100: #f0f0f0;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #1f2933;

    /* ===== Status ===== */
    --color-success: #2e7d32;
    --color-danger: #c62828;
    --color-warning: #f0b44c;

    /* ===== UI ===== */
    --color-surface: #ffffff;
    --color-hover: #fff7ea;

    --radius-md: 10px;

    /* ===== Form Controls ===== */
    --control-height: 28px;
    --control-font-size: 14px;

    /* ===== Layout ===== */
    --page-padding-x: 32px;
    --page-padding-y: 24px;

    /* ===== Sticky & Layering ===== */
    --z-header: 200;
    --z-sticky-table: 50;
    --z-dropdown: 500;

    /* ===== Table ===== */
    --table-header-height: 40px;
}