/*
 * Comceptum Reporting – design tokens
 * Pas voor een andere look vooral de variabelen in dit bestand aan.
 * De overige dashboard-CSS gebruikt uitsluitend deze tokens.
 */
:root{
  --cr-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --cr-bg:#f3f6fb;
  --cr-bg-elevated:#f8faff;
  --cr-surface:#ffffff;
  --cr-surface-glass:rgba(255,255,255,.82);
  --cr-surface-muted:#f7f8fc;
  --cr-text:#111827;
  --cr-text-strong:#0b1220;
  --cr-muted:#667085;
  --cr-muted-2:#98a2b3;
  --cr-border:#e7eaf0;
  --cr-border-strong:#d5dae4;

  --cr-accent:#4f46e5;
  --cr-accent-rgb:79,70,229;
  --cr-accent-hover:#4338ca;
  --cr-accent-contrast:#ffffff;
  --cr-accent-soft:rgba(79,70,229,.10);
  --cr-accent-soft-strong:rgba(79,70,229,.16);
  --cr-accent-2:#06b6d4;
  --cr-accent2-rgb:6,182,212;
  --cr-accent-gradient:linear-gradient(135deg,#4f46e5 0%,#2563eb 55%,#06b6d4 100%);

  --cr-success:#16a34a;
  --cr-success-soft:rgba(22,163,74,.10);
  --cr-google:#34a853;
  --cr-meta:#0866ff;
  --cr-danger:#dc2626;

  --cr-chart:#4f46e5;
  --cr-chart-grid:#e9edf4;
  --cr-chart-label:#7b8494;

  /* Grafiekreeksen: pas deze kleuren aan om de dashboardgrafiek te restylen. */
  --cr-series-spend:#4f46e5;
  --cr-series-impressions:#0284c7;
  --cr-series-clicks:#d97706;
  --cr-series-ctr:#059669;
  --cr-series-conversions:#db2777;
  --cr-series-cpa:#7c3aed;

  /* Tooltips / help icons: pas deze tokens aan voor een andere tooltip-look. */
  --cr-help-bg:rgba(255,255,255,.88);
  --cr-help-border:#d8deea;
  --cr-help-text:#7b8494;
  --cr-tooltip-bg:rgba(17,24,39,.97);
  --cr-tooltip-text:#ffffff;
  --cr-tooltip-muted:#d7dce5;
  --cr-tooltip-border:rgba(255,255,255,.10);
  --cr-tooltip-width:320px;
  --cr-tooltip-radius:13px;
  --cr-tooltip-shadow:0 16px 40px rgba(17,24,39,.22),0 3px 10px rgba(17,24,39,.12);

  --cr-radius-sm:10px;
  --cr-radius-md:14px;
  --cr-radius-lg:20px;
  --cr-radius-xl:28px;

  /* Actieve KPI-indicator: ingesprongen zodat de lijn binnen de afgeronde kaart blijft. */
  --cr-kpi-active-inset:var(--cr-radius-lg);
  --cr-kpi-active-height:3px;

  --cr-shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.04);
  --cr-shadow-card:0 10px 30px rgba(24,39,75,.06),0 2px 8px rgba(24,39,75,.03);
  --cr-shadow-card-hover:0 18px 45px rgba(24,39,75,.10),0 4px 12px rgba(24,39,75,.04);
  --cr-shadow-focus:0 0 0 4px rgba(79,70,229,.14);

  --cr-speed-fast:150ms;
  --cr-speed:240ms;
  --cr-speed-slow:420ms;
  --cr-ease:cubic-bezier(.2,.75,.25,1);
}