/* ========================================
   VARIABLES.CSS - Design tokens
   ======================================== */

:root {
  /* Kleuren */
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  --primary: #0f172a;
  --accent: #3b82f6;
  --accent-2: #2563eb;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Semantische kleur-aliassen */
  --text-light: #64748b;       /* lichtere tekst (placeholders) */
  --text-lighter: #94a3b8;     /* nog lichter (hints) */
  --hover: #f1f5f9;            /* rij hover-achtergrond */
  --primary-light: #1e293b;    /* donkere variant van primary */
  --accent-light: #60a5fa;     /* lichte accent tint */
  --info: #06b6d4;             /* info/cyan kleur */
  --background: #f8fafc;       /* alias voor --bg */
  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Schaduwen */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 8px 20px rgba(15,23,42,.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1);

  /* Border radius */
  --r-sm: 10px;
  --r: 14px;
  --radius: 8px;  /* legacy alias */

  /* Spacing */
  --sp-1: .5rem;
  --sp-2: .75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;

  /* Layout */
  --sidebar-w: 260px;
  --content-max: 1400px;
  --layout-gutter: 24px;
  --layout-gutter-mobile: 14px;
  --layout-stack-gap: 24px;
  --layout-card-padding: 18px;

  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.5;
  --font-weight-regular: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-display: 800;
  --font-size-h1: 1.75rem;
  --font-size-h2: 1.375rem;
  --font-size-h3: 1.125rem;
  --font-size-h4: 1rem;

  /* Buttons & inputs */
  --btn-height: 40px;
  --btn-height-sm: 32px;
  --btn-radius: 12px;
  --btn-radius-sm: 10px;
  --input-height: 40px;
  --input-radius: 12px;

  /* ── Z-index layers — single source of truth ──────────────────────────────
     Always use these variables instead of hardcoded numbers.
     Order: base < sticky < sidebar < dropdown < panel < overlay < modal
            < dialog < ai-modal < notif < toast < migrate < auth
            < onboard < dim < tour
  ─────────────────────────────────────────────────────────────────────────── */
  --z-base:            1;   /* sticky row inside a component (e.g. filter header) */
  --z-sticky:         40;   /* sticky page headers (topbar, table headers) */
  --z-sidebar:        50;   /* fixed sidebar (desktop) */
  --z-sidebar-mobile:100;   /* mobile sidebar (slides over content) */
  --z-dropdown:      200;   /* dropdowns, select menus, search results */
  --z-panel:         300;   /* slide-in side panels (lead detail, AI panel) */
  --z-panel-sub:     310;   /* stacking context inside a panel */
  --z-fab:           350;   /* floating action buttons */
  --z-overlay:       400;   /* modal backdrop */
  --z-modal:         500;   /* standard modals */
  --z-modal-high:    600;   /* priority modals (billing, support, report preview) */
  --z-dialog:        700;   /* confirm dialogs (AppDialog) */
  --z-ai-modal:      800;   /* AI analysis modal */
  --z-notif-menu:    850;   /* notification dropdown panel */
  --z-toast:         900;   /* toast notifications */
  --z-migrate:       950;   /* migration progress widget */
  --z-auth:         1000;   /* auth / login overlay */
  --z-onboard:      1100;   /* onboarding wizard */
  --z-dim:          1200;   /* screen dim overlay (pointer-events:none) */
  --z-tour-overlay: 1300;   /* product tour backdrop */
  --z-tour-hl:      1310;   /* product tour element highlight */
  --z-tour-card:    1320;   /* product tour tooltip card */
}