/* ==========================================================================
   CashDesk Design Tokens
   --------------------------------------------------------------------------
   Canonical :root variabelen afgeleid uit de shell HTML prototypes.
   Gebruikt shadcn/ui naming conventions (HSL triplets zonder hsl() wrapper)
   zodat ze compatible zijn met Blazor Blueprint themes + tweakcn.com.

   Bronbestanden: cashdesk-header.html, werknemers.html, home_14.html,
   dagsluiting.html, kpi-rapporten.html, marketplace_7.html,
   leveringsgebied-v2.html, voertuigen.html

   Laatste update: 2026-04-17
   ========================================================================== */

:root {
  /* ========================================================================
     SEMANTIC COLORS — shadcn convention
     Background/foreground paren, component-scoped tokens
     ======================================================================== */

  /* App-wide */
  --background: 0 0% 100%;              /* #ffffff — page bg */
  --foreground: 222 47% 6%;             /* #111827 — primary text */

  /* Card / panel surfaces */
  --card: 0 0% 100%;                    /* #ffffff */
  --card-foreground: 222 47% 6%;        /* #111827 */

  /* Popover / dropdown / tooltip */
  --popover: 0 0% 100%;                 /* #ffffff */
  --popover-foreground: 222 47% 6%;     /* #111827 */

  /* Primary — CashDesk blauw uit de shell-header (#2563eb) */
  --primary: 221 83% 53%;               /* #2563eb */
  --primary-foreground: 210 40% 98%;    /* #f8fafc — tekst op primary bg */
  --primary-hover: 224 76% 48%;         /* #1d4ed8 — darker voor hover states */
  --primary-subtle: 214 95% 93%;        /* #dbeafe — lichte bg voor badges etc */

  /* Secondary — neutral hoverable surface */
  --secondary: 210 40% 96%;             /* #f1f5f9 */
  --secondary-foreground: 215 25% 27%;  /* #374151 */

  /* Muted — rustige backgrounds, secondary text */
  --muted: 220 14% 96%;                 /* #f3f4f6 — most common neutral */
  --muted-foreground: 215 14% 47%;      /* #6b7280 — secondary text */

  /* Accent — hover/focus highlight */
  --accent: 210 40% 96%;                /* #f1f5f9 */
  --accent-foreground: 215 25% 27%;     /* #374151 */

  /* ========================================================================
     STATUS COLORS — voor badges, chips, alerts
     Elke status heeft: base, foreground, en subtle (bg) variant
     ======================================================================== */

  /* Destructive / error — #dc2626 uit shell */
  --destructive: 0 72% 51%;             /* #dc2626 */
  --destructive-foreground: 0 0% 100%;  /* #ffffff */
  --destructive-subtle: 0 86% 97%;      /* #fef2f2 — lichte error bg */

  /* Success — #15803d uit shell */
  --success: 142 72% 29%;               /* #15803d */
  --success-foreground: 0 0% 100%;      /* #ffffff */
  --success-subtle: 138 76% 94%;        /* #dcfce7 → #f0fdf4 */

  /* Warning — #b45309 uit shell (amber-700) */
  --warning: 26 90% 37%;                /* #b45309 */
  --warning-foreground: 0 0% 100%;      /* #ffffff */
  --warning-subtle: 48 100% 96%;        /* #fffbeb */

  /* Info — aparte tint voor informatieve signalen */
  --info: 221 83% 53%;                  /* fallback naar primary */
  --info-foreground: 0 0% 100%;
  --info-subtle: 214 95% 93%;           /* #dbeafe */

  /* ========================================================================
     DARK SURFACE — voor section headers zoals dropdown headers in shell
     De shell gebruikt #1e2d40 voor donkere section banners
     ======================================================================== */
  --section: 215 36% 18%;               /* #1e2d40 — donkere section bg */
  --section-foreground: 0 0% 100%;      /* witte tekst */
  --section-muted: 215 20% 65%;         /* muted tekst op section bg */

  /* ========================================================================
     BORDERS & INPUTS
     ======================================================================== */
  --border: 220 13% 91%;                /* #e5e7eb — most used border */
  --border-subtle: 220 14% 96%;         /* #f3f4f6 — zachte separator */
  --input: 220 13% 91%;                 /* #e5e7eb */
  --ring: 221 83% 53%;                  /* #2563eb — focus ring = primary */

  /* ========================================================================
     RADIUS — shadcn scale, gebaseerd op 8px base
     Shell gebruikt 4-8px voor kleine elementen, 12px voor panels, 20px voor pills
     ======================================================================== */
  --radius: 0.5rem;                             /* 8px base */
  --radius-sm: calc(var(--radius) - 4px);       /* 4px — kleine badges, tags */
  --radius-md: calc(var(--radius) - 2px);       /* 6px — buttons, inputs */
  --radius-lg: var(--radius);                   /* 8px — cards */
  --radius-xl: calc(var(--radius) + 4px);       /* 12px — dialogs, panels */
  --radius-pill: 9999px;                        /* pill — status chips, store pills */

  /* ========================================================================
     TYPOGRAPHY
     Shell is density-georienteerd: veel 10-13px tekst, 14px als body base
     ======================================================================== */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes — shadcn-stijl namen */
  --font-size-xs: 0.6875rem;    /* 11px — labels, meta, KPI sub-labels */
  --font-size-sm: 0.8125rem;    /* 13px — secondary text, table body */
  --font-size-base: 0.875rem;   /* 14px — body default */
  --font-size-md: 0.9375rem;    /* 15px — KPI numbers, emphasized body */
  --font-size-lg: 1rem;         /* 16px — card titles */
  --font-size-xl: 1.125rem;     /* 18px — status chip numbers */
  --font-size-2xl: 1.375rem;    /* 22px — page titles */

  /* Weights — shell zwaar op 600/700 voor density */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;  /* voor status-chip numbers */

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;

  /* Letter spacing */
  --tracking-tight: -0.02em;     /* voor numeric values, titles */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;       /* uppercase labels */

  /* ========================================================================
     SPACING — 4px base
     ======================================================================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */

  /* ========================================================================
     SHELL-SPECIFIEKE DIMENSIES
     Vastgelegd door de vergaderingen, niet onderhandelbaar
     ======================================================================== */
  --shell-topbar-height: 52px;          /* topbar vaste hoogte */
  --shell-footer-height: 52px;          /* footer-nav hoogte */
  --shell-status-chip-height: 36px;     /* status chips in topbar */
  --shell-kpi-item-height: 36px;        /* kpi items in topbar */
  --shell-icon-button: 32px;            /* standard icon button size */

  /* ========================================================================
     SHADOWS — subtle, shadcn-stijl
     ======================================================================== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* ========================================================================
     Z-INDEX scale
     ======================================================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-footer: 300;
  --z-topbar: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ========================================================================
     TRANSITIONS
     ======================================================================== */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;
}

/* ==========================================================================
   DARK MODE — placeholder, voor later
   Als dark mode komt, override dezelfde semantic tokens onder .dark
   ========================================================================== */
.dark {
  --background: 215 36% 12%;
  --foreground: 210 40% 98%;
  --card: 215 36% 14%;
  --card-foreground: 210 40% 98%;
  /* ... rest wordt aangevuld wanneer dark mode aan de beurt is */
}