/* ═══════════════════════════════════════════════════════════════════════════
   CallrOS — ontwerptokens
   ───────────────────────────────────────────────────────────────────────────
   Dit zijn de tokens uit CallrOS Design System.zip (aangeleverd door Rocher op
   10 oktober 2026), letterlijk overgenomen: colors, spacing, typography,
   effects en het semantische thema, plus de keyframes uit base.css.

   LET OP: ER ZIJN TWEE DESIGN SYSTEMS. De map "Callr Design System" is de
   MERKstijl (website, social, rapporten): marketingmaten, Callr Purple als
   actiekleur, kosmische effecten. Dit bestand komt uit CallrOS Design
   System.zip, het systeem voor de WERKOMGEVING: Soft Violet #8D72CA als
   stap 500 van een eigen schaal, kleinere UI-maten, nagerekende contrasten.
   De eerste versie van deze laag (17 oktober, 's middags) kwam per ongeluk
   uit het merkpakket en is dezelfde dag vervangen.

   Wat componenten gebruiken zijn ALLEEN de semantische tokens uit het
   themadeel (--surface-*, --text-*, --border-*, --action-*, --status-*),
   nooit de ruwe kleurwaarden erboven. Licht is de standaard van het nieuwe
   ontwerp; donker zet je aan met data-theme="dark". De bestaande schermen
   gebruiken nog geen van deze tokens en zien er dus exact zo uit als
   voorheen, tot ze één voor één omgezet worden.

   Twee afwijkingen van het pakket, allebei bewust:

   1. tokens/fonts.css is NIET overgenomen. Dat haalt Satoshi bij Fontshare en
      Inter bij Google, en het portaal stuurt default-src 'self': de browser
      gooit zo'n bestand weg. De lettertypen staan al op de eigen server, in
      /fonts, via de @font-face-regels in portaal.css.

   2. De focus-override uit base.css is NIET overgenomen. Die zet op elk
      element een nieuwe focusring met !important, en de offsetkleur komt uit
      het lichte thema. Op de huidige donkere schermen zou elke focus er
      vandaag anders uitzien, terwijl die schermen nog niet aan de beurt zijn.
      Hij gaat mee zodra het eerste scherm omgezet wordt, samen met de
      data-theme op dat scherm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── tokens/colors.css (CallrOS Design System) ───────────────────────── */
/* CallrOS — Basiskleuren (ruwe waarden).
   Componenten verwijzen NOOIT direct naar deze tokens, alleen naar tokens/theme.css.
   Soft Violet #8D72CA is stap 500. De schaal loopt in oklch op vaste tint (296.5°). */

:root {
  /* ---- Soft Violet, primaire kleur CallrOS ---- */
  --violet-50:  #F7F5FE; /* oklch(0.975 0.012 296.5) */
  --violet-100: #EFEBFE; /* oklch(0.948 0.026 296.5) */
  --violet-200: #DFD6FC; /* oklch(0.895 0.052 296.5) */
  --violet-300: #C7B8F4; /* oklch(0.815 0.085 296.5) */
  --violet-400: #AA93E3; /* oklch(0.715 0.115 296.5) */
  --violet-500: #8D72CA; /* oklch(0.615 0.132 296.5) Soft Violet */
  --violet-600: #7255AC; /* oklch(0.520 0.135 296.5) */
  --violet-700: #5C4190; /* oklch(0.445 0.125 296.5) */
  --violet-800: #463170; /* oklch(0.370 0.105 296.5) */
  --violet-900: #30214E; /* oklch(0.290 0.080 296.5) */

  /* ---- Callr-neutralen (gelijk aan Callr) ---- */
  --midnight:   #0F172A;
  --soft-white: #F8FAFC; /* nooit puur wit */
  --slate:      #64748B;

  /* ---- Slate-afgeleiden voor vlakken en tekst ---- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-150: #E8EDF3;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-550: #5B6B80; /* Slate verdiept: haalt 4,5:1 op app-grond */
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --midnight-850: #172036; /* paneel in dark mode */
  --midnight-950: #0B1222; /* verzonken vlak in dark mode */

  /* ---- Functioneel (status) ---- */
  --emerald:     #10B981; /* Callr Emerald, alleen functioneel */
  --emerald-50:  #ECFDF5;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-700: #047857;
  --amber-50:  #FFFBEB;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-700: #B45309;
  --red-50:  #FEF2F2;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --blue-50:  #EFF6FF;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-700: #1D4ED8;

  /* ---- Alleen voor het Callr-logo, nooit als actiekleur ---- */
  --callr-purple: #551AE6;
  --electric-lavender: #8B5CF6;
  --deep-indigo: #3B0FB3;
}


/* ───────────────────────── tokens/spacing.css (CallrOS Design System) ───────────────────────── */
/* CallrOS — Spacing, dichtheid, radii en layout.
   De spacingschaal is gelijk aan Callr (4px-basis). Dichtheid stuur je met data-density="compact". */

:root {
  /* ---- Spacingschaal (Callr) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Dichtheid: comfortabel (standaard) ---- */
  --control-h: 36px;        /* knop, invoer, select */
  --control-h-sm: 32px;     /* minimum klikdoel in CallrOS */
  --control-h-touch: 44px;
  --control-px: 14px;
  --row-h: 44px;            /* tabelrij */
  --cell-px: 14px;
  --panel-p: 20px;
  --stack-gap: 16px;
  --nav-item-h: 36px;

  /* ---- Radii (Callr-afgeleid, rustiger voor de werkomgeving) ---- */
  --radius-xs: 4px;     /* checkbox, kbd */
  --radius-sm: 6px;     /* tags, kleine knoppen */
  --radius-md: 8px;     /* knoppen, invoer (= Callr --radius-sm) */
  --radius-lg: 12px;    /* panelen, kaarten, KPI-tegels */
  --radius-xl: 16px;    /* dialogen, commandopalet */
  --radius-pill: 999px; /* badges, avatars, switch */

  /* ---- Layout ---- */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 56px;
  --drawer-w: 440px;
  --content-maxw: 1440px;
}

/* Compact: standaard voor tabellen; als hele werkomgeving in te stellen */
[data-density="compact"] {
  --control-h: 32px;
  --control-h-sm: 28px;
  --control-px: 12px;
  --row-h: 36px;
  --cell-px: 12px;
  --panel-p: 16px;
  --stack-gap: 12px;
  --nav-item-h: 32px;
}


/* ───────────────────────── tokens/typography.css (CallrOS Design System) ───────────────────────── */
/* CallrOS — Typografie.
   Families, gewichten en de Callr-typeschaal zijn exact overgenomen uit het Callr Design System.
   Daaronder staat de UI-schaal voor de werkomgeving: kleinere maten voor tabellen, formulieren en navigatie. */

:root {
  /* ---- Families (Callr) ---- */
  --font-display: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Gewichten (Callr) ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* ---- Typeschaal (Callr, px) ---- */
  --fs-display: 76px;
  --fs-h1: 46px;
  --fs-h2: 38px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-label: 12px;
  --fs-data: 18px;
  --fs-eyebrow: 12px;

  /* ---- Regelhoogtes (Callr) ---- */
  --lh-display: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-body: 1.6; /* @kind other */
  --lh-tight: 1.25; /* @kind other */

  /* ---- Letterspatiëring (Callr) ---- */
  --tracking-display: -0.02em; /* @kind other */
  --tracking-heading: -0.01em; /* @kind other */
  --tracking-label: 0.14em; /* @kind other */
  --tracking-eyebrow: 0.16em; /* @kind other */

  /* ---- CallrOS UI-schaal (aanvulling voor de werkomgeving) ---- */
  --fs-ui-page: 24px;   /* paginatitel, Satoshi 700 (= --fs-h4) */
  --fs-ui-section: 17px;/* sectietitel in panelen, Satoshi 700 */
  --fs-ui-kpi: 30px;    /* KPI-waarde, Satoshi 700, tabular (= --fs-h3) */
  --fs-ui-body: 14px;   /* standaard UI-tekst, Inter 400 */
  --fs-ui-control: 14px;/* knoppen, invoer, Inter 500/600 */
  --fs-ui-table: 13px;  /* tabelcellen */
  --fs-ui-meta: 12px;   /* hulpteksten, tijdstempels, labels */
  --lh-ui: 1.45; /* @kind other */

  /* ---- Semantische rollen ---- */
  --text-display-font: var(--font-display);
  --text-body-font: var(--font-body);
  --text-mono-font: var(--font-mono);
  --numeric: tabular-nums; /* @kind other */
}


/* ───────────────────────── tokens/effects.css (CallrOS Design System) ───────────────────────── */
/* CallrOS — Elevatie, focus, motion en de merkmoment-effecten. */

:root {
  /* ---- Elevatie: zacht en laag. Panelen hebben een rand, geen schaduw. ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);                                  /* knop secundair, KPI-tegel */
  --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06); /* popover, menu, toast */
  --shadow-3: 0 12px 40px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08); /* dialog, drawer, ⌘K */

  /* ---- Focus: 2px ring + 2px offset in de vlakkleur ---- */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-shadow: 0 0 0 var(--focus-offset) var(--focus-ring-offset), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring);
  --focus-scroll-margin: 72px; /* scroll-margin zodat focus niet onder de sticky topbar valt */

  /* ---- Motion: kort en functioneel, geen bounce ---- */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 160ms; /* @kind other */
  --dur-slow: 200ms; /* @kind other */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  /* ---- Merkmomenten (inloggen, lege staten, onboarding, opstarten). Nooit achter werkschermen. ---- */
  --brand-gradient-dark: linear-gradient(135deg, #0F172A 0%, #30214E 100%); /* @kind color */
  --brand-glow: radial-gradient(circle, rgba(141, 114, 202, 0.42) 0%, rgba(141, 114, 202, 0) 70%); /* @kind color */
}

[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(2, 6, 23, 0.40);
  --shadow-2: 0 6px 20px rgba(2, 6, 23, 0.50), 0 1px 2px rgba(2, 6, 23, 0.40);
  --shadow-3: 0 16px 48px rgba(2, 6, 23, 0.64), 0 2px 6px rgba(2, 6, 23, 0.40);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}


/* ───────────────────────── tokens/theme.css (CallrOS Design System) ───────────────────────── */
/* CallrOS — Semantische thema-tokens. Componenten gebruiken alleen deze tokens.
   Light is de standaard (:root). Dark activeer je met data-theme="dark" op <html> of een container.
   Contrastwaarden staan erbij; ze zijn nagerekend (WCAG 2.2 AA). */

:root {
  color-scheme: light;
  /* ---- Vlakken ---- */
  --surface-app: var(--slate-100);        /* achtergrond van de werkomgeving */
  --surface-panel: var(--soft-white);     /* panelen, kaarten, tabellen */
  --surface-sunken: var(--slate-150);     /* tabelkop, invoer-achtergrond, wells */
  --surface-raised: var(--soft-white);    /* dialogen, popovers, menu's (met schaduw) */
  --surface-hover: rgba(100, 116, 139, 0.08);
  --surface-selected: var(--violet-100);  /* geselecteerde rij, actief nav-item */
  --surface-inverse: var(--midnight);     /* tooltip, toast */
  --surface-overlay: rgba(15, 23, 42, 0.48); /* achter dialog en drawer */

  /* ---- Tekst ---- */
  --text-primary: var(--midnight);        /* 16,5:1 op paneel */
  --text-secondary: var(--slate-700);     /* 9,9:1 */
  --text-muted: var(--slate-550);         /* 5,0:1 op app, 5,3:1 op paneel */
  --text-disabled: var(--slate-400);      /* uitgeschakeld, geen contrasteis */
  --text-inverse: var(--soft-white);
  --text-link: var(--violet-600);         /* 5,3:1 op app, 5,6:1 op paneel */
  --text-link-hover: var(--violet-700);
  --text-on-action: var(--soft-white);    /* 5,6:1 op --action-primary */
  --text-on-destructive: var(--soft-white); /* 6,2:1 op --action-destructive */

  /* ---- Randen ---- */
  --border-subtle: rgba(100, 116, 139, 0.18);  /* scheidingslijnen, paneelranden (decoratief) */
  --border-default: rgba(100, 116, 139, 0.30);
  --border-control: #7E8DA2;              /* invoervelden, checkbox: 3,1:1 op paneel */
  --border-strong: var(--slate-500);
  --border-selected: var(--violet-500);   /* 3,7:1 op paneel */

  /* ---- Acties ---- */
  --action-primary: var(--violet-600);
  --action-primary-hover: var(--violet-700);
  --action-primary-active: var(--violet-800);
  --action-secondary: var(--soft-white);
  --action-secondary-hover: var(--slate-150);
  --action-ghost-hover: rgba(100, 116, 139, 0.10);
  --action-destructive: var(--red-700);   /* 6,2:1 met Soft White */
  --action-destructive-hover: var(--red-800);
  --accent-indicator: var(--violet-500);  /* selectiebalk, actieve tab, progress */

  /* ---- Focus ---- */
  --focus-ring: var(--violet-600);        /* 5,6:1 op paneel */
  --focus-ring-offset: var(--surface-panel);

  /* ---- Status ---- */
  --status-success-text: var(--emerald-700);  /* 5,2:1 op tint */
  --status-success-bg: var(--emerald-50);
  --status-success-border: var(--emerald-300);
  --status-success-solid: var(--emerald);     /* grafiekvulling, altijd met label */
  --status-warning-text: var(--amber-700);    /* 4,8:1 op tint */
  --status-warning-bg: var(--amber-50);
  --status-warning-border: var(--amber-300);
  --status-error-text: var(--red-700);        /* 5,9:1 op tint */
  --status-error-bg: var(--red-50);
  --status-error-border: var(--red-300);
  --status-info-text: var(--blue-700);        /* 6,2:1 op tint */
  --status-info-bg: var(--blue-50);
  --status-info-border: var(--blue-300);
  --status-neutral-text: var(--slate-700);
  --status-neutral-bg: var(--slate-150);
  --status-neutral-border: var(--slate-300);

  /* ---- Data ---- */
  --chart-1: var(--violet-500);
  --chart-2: var(--violet-300);
  --chart-3: var(--slate-400);
  --chart-positive: var(--emerald);
  --chart-grid: rgba(100, 116, 139, 0.16);
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface-app: var(--midnight);
  --surface-panel: var(--midnight-850);
  --surface-sunken: var(--midnight-950);
  --surface-raised: var(--slate-800);
  --surface-hover: rgba(148, 163, 184, 0.10);
  --surface-selected: rgba(141, 114, 202, 0.20);
  --surface-inverse: var(--soft-white);
  --surface-overlay: rgba(2, 6, 23, 0.64);

  --text-primary: var(--soft-white);      /* 15,6:1 op paneel */
  --text-secondary: var(--slate-300);     /* 10,9:1 */
  --text-muted: var(--slate-400);         /* 6,3:1 op paneel, 5,7:1 op raised */
  --text-disabled: var(--slate-600);
  --text-inverse: var(--midnight);
  --text-link: var(--violet-300);         /* 8,9:1 op paneel */
  --text-link-hover: var(--violet-200);
  --text-on-action: var(--midnight);      /* 6,8:1 op --action-primary */
  --text-on-destructive: var(--midnight); /* 6,5:1 op --action-destructive */

  --border-subtle: rgba(148, 163, 184, 0.14);
  --border-default: rgba(148, 163, 184, 0.24);
  --border-control: #6B7A90;              /* 3,4:1 op paneel */
  --border-strong: var(--slate-400);
  --border-selected: var(--violet-400);

  --action-primary: var(--violet-400);
  --action-primary-hover: var(--violet-300);
  --action-primary-active: var(--violet-200);
  --action-secondary: var(--slate-800);
  --action-secondary-hover: #273449;
  --action-ghost-hover: rgba(148, 163, 184, 0.12);
  --action-destructive: var(--red-400);   /* met Midnight-tekst 6,5:1 */
  --action-destructive-hover: var(--red-300);
  --accent-indicator: var(--violet-400);

  --focus-ring: var(--violet-400);        /* 6,2:1 op paneel */
  --focus-ring-offset: var(--surface-panel);

  --status-success-text: var(--emerald-400);
  --status-success-bg: rgba(16, 185, 129, 0.14);
  --status-success-border: rgba(52, 211, 153, 0.40);
  --status-success-solid: var(--emerald);
  --status-warning-text: var(--amber-400);
  --status-warning-bg: rgba(251, 191, 36, 0.12);
  --status-warning-border: rgba(251, 191, 36, 0.38);
  --status-error-text: var(--red-300);
  --status-error-bg: rgba(248, 113, 113, 0.12);
  --status-error-border: rgba(248, 113, 113, 0.40);
  --status-info-text: var(--blue-300);
  --status-info-bg: rgba(96, 165, 250, 0.12);
  --status-info-border: rgba(96, 165, 250, 0.38);
  --status-neutral-text: var(--slate-300);
  --status-neutral-bg: rgba(148, 163, 184, 0.12);
  --status-neutral-border: rgba(148, 163, 184, 0.30);

  --chart-1: var(--violet-400);
  --chart-2: var(--violet-700);
  --chart-3: var(--slate-600);
  --chart-positive: var(--emerald-400);
  --chart-grid: rgba(148, 163, 184, 0.14);
}


/* ───────────────────────── tokens/base.css, zonder de focus-override ───────────────────────── */
/* CallrOS — basisregels die componenten niet inline kunnen zetten: focus, scroll-marge, keyframes. */
.cos-num{font-variant-numeric:tabular-nums;}
@keyframes cos-twinkle{0%,100%{opacity:.15}50%{opacity:.8}}
@keyframes cos-spin{to{transform:rotate(360deg)}}
@keyframes cos-shimmer{0%{background-position:-240px 0}100%{background-position:240px 0}}
@keyframes cos-fade-in{from{opacity:0}to{opacity:1}}
@keyframes cos-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cos-slide-in-right{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes cos-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}}