/* ============================================
   CX Management — design tokens (canonical)
   Ported 1:1 from DMB/cx-management/index.html :root
   Loaded before cx-management.css and every dmb/*.css
   so one palette change flows through the whole CX suite.
   ============================================ */

:root {
  /* ---------- Color: blues (primary brand) ---------- */
  --cxm-b10: #ECF3FE;
  --cxm-b20: #C6DAFC;
  --cxm-b30: #A0C2F9;
  --cxm-b40: #7AAAF7;
  --cxm-b50: #4185F4;
  --cxm-b60: #4185F4;
  --cxm-b70: #0E52C1;
  --cxm-b80: #001F8E;
  /* RGB triplets for use in rgba() — when you need a translucent variant
     of the brand blue, prefer rgba(var(--cxm-b60-rgb) / N) instead of a
     hard-coded hex with alpha. Keeps ramp colour drift in one place. */
  --cxm-b60-rgb: 65, 133, 244;
  --cxm-e60-rgb: 231, 76, 60;
  --cxm-s60-rgb: 39, 174, 96;

  /* ---------- Color: greys (neutral scale) ---------- */
  --cxm-g10:  #F9FAFB;
  --cxm-g20:  #F1F2F5;
  --cxm-g30:  #E7EAEE;
  --cxm-g40:  #DEE2E7;
  --cxm-g50:  #D5D9E0;
  --cxm-g60:  #BABFC8;
  --cxm-g70:  #9DA2AA;
  --cxm-g80:  #6A6F77;
  --cxm-g90:  #373C44;
  --cxm-g100: #040911;

  /* ---------- Color: success (greens) ---------- */
  --cxm-s10: #E7F7F4;
  --cxm-s60: #10B48F;
  --cxm-s70: #00815C;
  --cxm-s80: #056B4D;

  /* ---------- Color: warning (yellows) ---------- */
  --cxm-w10: #FFF9EF;
  --cxm-w60: #FFC860;
  --cxm-w80: #996200;

  /* ---------- Color: danger (pinks / reds) ---------- */
  --cxm-e10: #FFF1F4;
  --cxm-e60: #FF6F92;
  --cxm-e70: #CC3C5F;
  --cxm-e80: #99092C;

  /* ---------- Color: purple (DMB channel accent) ---------- */
  --cxm-p10: #F3EFF9;
  --cxm-p60: #865FC2;
  --cxm-p70: #583294;
  --cxm-p80: #3F148F;

  /* ---------- Color: orange (tertiary accent) ---------- */
  --cxm-o10: #FFF5F1;
  --cxm-o60: #FF9772;
  --cxm-o80: #AB4420;

  /* ---------- Spacing scale (4-step geometric) ---------- */
  --cxm-sp-1: 4px;
  --cxm-sp-2: 8px;
  --cxm-sp-3: 12px;
  --cxm-sp-4: 16px;
  --cxm-sp-5: 20px;
  --cxm-sp-6: 24px;
  --cxm-sp-7: 28px;
  --cxm-sp-8: 32px;
  --cxm-sp-9: 48px;

  /* ---------- Typography: family ---------- */
  --cxm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Typography: size scale (matches reference usage) ---------- */
  --cxm-fs-10: 10px;  /* table micro-header */
  --cxm-fs-11: 11px;  /* hint, tooltip */
  --cxm-fs-12: 12px;  /* meta, caption */
  --cxm-fs-13: 13px;  /* body, button */
  --cxm-fs-14: 14px;  /* emphasis */
  --cxm-fs-15: 15px;  /* section header */
  --cxm-fs-16: 16px;  /* card title */
  --cxm-fs-20: 20px;  /* h3 */
  --cxm-fs-22: 22px;  /* page h1 */
  --cxm-fs-28: 28px;  /* KPI value */

  /* ---------- Typography: weight scale ---------- */
  --cxm-fw-400: 400;
  --cxm-fw-500: 500;
  --cxm-fw-600: 600;
  --cxm-fw-700: 700;
  --cxm-fw-800: 800;
  --cxm-fw-900: 900;

  /* ---------- Typography: line-height ---------- */
  --cxm-lh-tight:   1.1;
  --cxm-lh-snug:    1.2;
  --cxm-lh-normal:  1.4;
  --cxm-lh-relaxed: 1.5;

  /* ---------- Typography: letter-spacing ---------- */
  --cxm-ls-tight: -0.4px;
  --cxm-ls-snug:  -0.2px;
  --cxm-ls-wide:   0.5px;
  --cxm-ls-wider:  0.6px;

  /* ---------- Radii ---------- */
  --cxm-rs: 6px;     /* chip, small control */
  --cxm-r:  8px;     /* standard card, input */
  --cxm-rl: 12px;    /* large card, modal */
  --cxm-rf: 9999px;  /* pill */

  /* ---------- Shadows ---------- */
  --cxm-sh: 0 1px 3px  rgba(4, 9, 17, .06), 0 1px 2px  rgba(4, 9, 17, .04);
  --cxm-sm: 0 4px 12px rgba(4, 9, 17, .08), 0 2px 4px  rgba(4, 9, 17, .04);
  --cxm-sl: 0 12px 32px -4px rgba(4, 9, 17, .12), 0 4px 8px -2px rgba(4, 9, 17, .06);

  /* ---------- Motion ---------- */
  --cxm-ease: cubic-bezier(.16, 1, .3, 1);
  --cxm-dur:  180ms;
}

/* Respect user reduced-motion preference everywhere these tokens are used. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cxm-dur: 0ms;
  }
}