/* Openclaims Design System — gedeelde tokenlaag voor Mailstudio Platform.
   Bron: Openclaims Design System/tokens/openclaims.css (org-default, 2-9-2026). Light-only (het DS definieert geen dark). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,200..500,0..1,0&display=swap');

:root {
  color-scheme: light;

  /* Brand */
  --oc-brand-purple: #472466;
  --oc-brand-blue: #0593D5;
  --oc-brand-teal: #76C5CC;
  --oc-brand-gradient: radial-gradient(120% 120% at 100% 100%, #76C5CC 0%, #0593D5 30%, #30498B 58%, #472466 80%);

  /* Navy (navigatie) */
  --oc-navy-950: #011A3E;
  --oc-navy-900: #01224F;   /* sidebar */
  --oc-navy-800: #0A2C66;   /* actieve filter-chip, primaire donkere knop */
  --oc-navy-700: #0F3D91;   /* actief nav-item */
  --oc-navy-600: #1E4A99;

  /* Interactie — OC website-blauw (#284173) als primair accent (zoals openclaims.com) */
  --oc-blue-800: #1C2F4F;   /* donkere hover/pressed */
  --oc-blue-700: #284173;   /* primaire knop + accent (web-blauw) */
  --oc-blue-600: #284173;   /* links, accenttekst */
  --oc-blue-100: #D7E0EF;
  --oc-blue-50:  #EDF1F8;

  /* Neutralen / ink */
  --oc-ink-900: #0E1B3D;    /* tekst primair */
  --oc-ink-700: #33405C;
  --oc-ink-500: #5E6A82;    /* tekst secundair */
  --oc-ink-400: #8A93A6;    /* labels, placeholders */
  --oc-line-300: #D5DAE4;   /* sterke rand (knoppen) */
  --oc-line-200: #E4E8F0;   /* kaartrand, dividers */
  --oc-line-100: #EEF1F6;   /* tabelregels */
  --oc-bg: #F5F7FB;         /* canvas */
  --oc-surface: #FFFFFF;
  --oc-surface-2: #F9FAFC;

  /* Status (werkvoorraad) */
  --oc-overdue: #E11D26;     --oc-overdue-bg: #FFF0F0;  --oc-overdue-line: #F8CFD1;
  --oc-actie: #F26B0F;       --oc-actie-bg: #FFF4EB;
  --oc-wacht: #1F5FD1;       --oc-wacht-bg: #EEF3FF;
  --oc-success: #12A26A;     --oc-success-bg: #E6F6EE;
  --oc-warning: #E0A21B;     --oc-warning-bg: #FFF7E1;

  /* Prioriteit */
  --oc-p1: #E11D26; --oc-p2: #F26B0F; --oc-p3: #F5C518; --oc-p3-ink: #3D2E00;

  /* Fases (6 generiek) — kleur / tint / tekst */
  --oc-phase-intake: #8A93A6;     --oc-phase-intake-bg: #EEF0F4;     --oc-phase-intake-ink: #3A4557;
  --oc-phase-planning: #1F5FD1;   --oc-phase-planning-bg: #E4EDFF;   --oc-phase-planning-ink: #1D4FB0;
  --oc-phase-calculatie: #6A45C9; --oc-phase-calculatie-bg: #EEE8FB; --oc-phase-calculatie-ink: #5231A8;
  --oc-phase-expertise: #E0A21B;  --oc-phase-expertise-bg: #FFF1C9;  --oc-phase-expertise-ink: #9A6400;
  --oc-phase-herstel: #12A26A;    --oc-phase-herstel-bg: #E1F5EA;    --oc-phase-herstel-ink: #137A4F;
  --oc-phase-facturatie: #1C8C96; --oc-phase-facturatie-bg: #DFF3F4; --oc-phase-facturatie-ink: #166F77;

  /* Type */
  --oc-font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --oc-icon-font: 'Material Symbols Outlined';
  --oc-fs-display: 28px; --oc-fs-h1: 24px; --oc-fs-h2: 18px; --oc-fs-h3: 15px;
  --oc-fs-body: 14px; --oc-fs-sm: 13px; --oc-fs-xs: 12px; --oc-fs-eyebrow: 13px;

  /* Ruimte (4px basis) */
  --oc-space-1: 4px; --oc-space-2: 8px; --oc-space-3: 12px; --oc-space-4: 16px;
  --oc-space-5: 20px; --oc-space-6: 24px; --oc-space-8: 32px; --oc-space-10: 40px;
  --oc-sidebar-w: 214px; --oc-topbar-h: 60px; --oc-rail-w: 280px;

  /* Vorm */
  --oc-radius-xs: 4px; --oc-radius-sm: 6px; --oc-radius-md: 8px; --oc-radius-lg: 10px; --oc-radius-full: 999px;
  --oc-shadow-card: 0 1px 2px rgba(14,27,61,.04);
  --oc-shadow-pop: 0 8px 24px rgba(14,27,61,.10);
  --oc-ease: cubic-bezier(.2,0,0,1); --oc-dur: 150ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--oc-bg); color:var(--oc-ink-900);
  font-family:var(--oc-font); font-size:var(--oc-fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
a{ color:var(--oc-blue-600); text-decoration:none; }
a:hover{ text-decoration:underline; }
::placeholder{ color:var(--oc-ink-400); }
:focus-visible{ outline:2px solid var(--oc-blue-600); outline-offset:2px; }

/* Material Symbols helper */
.mi{
  font-family:var(--oc-icon-font); font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; display:inline-block;
  font-variation-settings:'opsz' 20,'wght' 300,'FILL' 0,'GRAD' 0;
  -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
  vertical-align:middle; user-select:none;
}