/* =========================================================================
   DESIGN TOKENS
   Values extracted from the reference screenshot: blue primary family,
   cool neutral surfaces, #f6f9fd page background, #020617 headings.
   ========================================================================= */
:root {
  /* --- Primary Indigo/Slate family (Fintech Pro) ------------------------ */
  --blue-50:  #eef2ff;
  --blue-100: #e0e7ff;
  --blue-150: #c7d2fe;
  --blue-200: #a5b4fc;
  --blue-300: #818cf8;
  --blue-400: #6366f1;
  --blue-500: #4f46e5;
  --blue-600: #4338ca;
  --blue-700: #3730a3;
  --blue-800: #312e81;
  --blue-900: #1e1b4b;


  /* --- Cool neutrals (matches the reference tint) -------------------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfdfd;
  --gray-50:  #f9fafb;
  --gray-100: #f3f6fb;
  --gray-150: #eef3fa;
  --gray-200: #e4eaf2;
  --gray-250: #dce3eb;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --ink:      #020617;
  --ink-soft: #404350;

  /* --- Semantic surfaces --------------------------------------------- */
  --page-bg:       #f8fafc;
  --surface:       #ffffff;
  --surface-muted: #f1f5f9;
  --surface-tint:  #eef2ff;
  --surface-sunken: #f8fafc;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus:  #6366f1;


  /* --- Text ------------------------------------------------------------ */
  --text:        var(--ink);
  --text-body:   #334155;
  --text-muted:  #64748b;
  --text-subtle: #8b98ab;
  --text-invert: #ffffff;

  /* --- Status ---------------------------------------------------------- */
  --success-bg:  #e9f8ef; --success-fg: #0f7b45; --success-bd: #b6e6c9;
  --warning-bg:  #fff6e3; --warning-fg: #a35b06; --warning-bd: #f6dfae;
  --danger-bg:   #fdecec; --danger-fg:  #b4231f; --danger-bd:  #f6c9c7;
  --info-bg:     var(--blue-50); --info-fg: var(--blue-700); --info-bd: var(--blue-200);
  --neutral-bg:  var(--gray-100); --neutral-fg: var(--gray-600); --neutral-bd: var(--gray-200);
  --primary-bg:  var(--blue-600); --primary-fg: #ffffff;

  /* --- Typography ------------------------------------------------------ */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --fs-2xs: 0.6875rem;  /* 11px - table micro labels */
  --fs-xs:  0.75rem;    /* 12px - meta, badges */
  --fs-sm:  0.8125rem;  /* 13px - dense table body */
  --fs-md:  0.875rem;   /* 14px - default UI */
  --fs-lg:  1rem;       /* 16px */
  --fs-xl:  1.125rem;   /* 18px - card titles */
  --fs-2xl: 1.375rem;   /* 22px - section titles */
  --fs-3xl: 1.75rem;    /* 28px - page title */
  --fs-4xl: 2.125rem;   /* 34px - KPI numbers */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --tracking-tight: -0.018em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.1em;

  /* --- Spacing scale (4px base) --------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 1.75rem;  --sp-8: 2rem;
  --sp-10: 2.5rem;  --sp-12: 3rem;    --sp-16: 4rem;

  /* --- Radius ------------------------------------------------------------ */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;

  /* --- Shadows (soft, blue-tinted) ------------------------------------- */
  --sh-xs: 0 1px 2px rgba(15, 42, 89, 0.05);
  --sh-sm: 0 1px 2px rgba(15, 42, 89, 0.06), 0 1px 3px rgba(15, 42, 89, 0.05);
  --sh-md: 0 2px 4px rgba(15, 42, 89, 0.05), 0 4px 12px rgba(15, 42, 89, 0.07);
  --sh-lg: 0 4px 8px rgba(15, 42, 89, 0.06), 0 12px 28px rgba(15, 42, 89, 0.1);
  --sh-xl: 0 8px 16px rgba(15, 42, 89, 0.08), 0 24px 48px rgba(15, 42, 89, 0.12);
  --sh-focus: 0 0 0 3px rgba(44, 107, 237, 0.18);
  --sh-inset: inset 0 1px 2px rgba(15, 42, 89, 0.05);

  /* --- Layout metrics --------------------------------------------------- */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --page-max: 1560px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  --z-sticky: 20; --z-drawer: 40; --z-modal: 60; --z-toast: 80; --z-tooltip: 90;
}

/* Chart palette - harmonised with the primary blue */
:root {
  --c-cashless: #2c6bed;
  --c-cashless-soft: #b6d4fd;
  --c-dental: #52b0f5;
  --c-dental-soft: #d3e5fc;
  --c-optical: #8b5cf6;
  --c-optical-soft: #e3d9fd;
  --c-deduction: #f0932b;
  --c-deduction-soft: #fbe3c4;
  --c-positive: #16a34a;
  --c-negative: #dc2626;
}