/* ============================================================
   ACRM design tokens — synced from Claude Design project
   "Datamart + CRM Design System" (colors_and_type.css).
   DO NOT hand-edit token values here; re-sync via /design-sync.

   Note: @font-face references fonts/*.woff2 which are vendored on
   sync. Until then, Inter/Manrope fall back to system fonts.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* ---------- RAW SCALE · neutrals (cool-tinted, never pure #000) ---------- */
  --ink-900: #18191b;
  --ink-800: #1f2023;
  --ink-700: #303135;
  --ink-600: #4a4b4f;
  --ink-500: #7d8184;
  --ink-400: #98999c;
  --ink-300: #b8b8c0;
  --line-300: #dcdbdd;
  --line-200: #eeeff1;
  --line-100: #f4f4f5;
  --surface-100: #ffffff;
  --surface-75: #fbfbfb;
  --surface-50: #faf9fe;
  --white: #ffffff;

  /* ---------- the one functional blue ---------- */
  --blue-600: #2666dd;
  --blue-500: #286bef;
  --blue-100: #e3eeff;
  --blue-ink: #1e3c7d;
  --selected: #eef3ff;

  /* ---------- desaturated status ---------- */
  --positive: #3aa874;
  --positive-subtle: #e9f6ee;
  --positive-ink: #2c6a4a;
  --warning: #c69a3a;
  --warning-subtle: #faf4e3;
  --warning-ink: #6c783b;
  --critical: #d6553f;
  --critical-subtle: #fbeee9;
  --critical-ink: #8a3a2a;
  --info: #3a72d6;
  --info-subtle: #e7eeff;
  --info-ink: #1e3c7d;

  /* ---------- soft attribute pills ---------- */
  --pill-lime-bg: #f0f5cf;
  --pill-lime-ink: #6c783b;
  --pill-amber-bg: #faecd0;
  --pill-amber-ink: #907b46;
  --pill-blue-bg: #e3eeff;
  --pill-blue-ink: #1e3c7d;
  --pill-purple-bg: #ece6fd;
  --pill-purple-ink: #6a4fd6;
  --pill-green-bg: #e2f3e7;
  --pill-green-ink: #3a6a4a;
  --pill-rose-bg: #fbe9ea;
  --pill-rose-ink: #9a4452;
  --pill-grey-bg: #f0f0f2;
  --pill-grey-ink: #5a5b5f;
  --accent-violet: #966ff2;

  /* ---------- entity icon tiles ---------- */
  --ic-blue: #2563eb;
  --ic-purple: #7c3aed;
  --ic-green: #059669;
  --ic-lime: #4d7c0f;
  --ic-amber: #ea580c;
  --ic-rose: #e11d48;
  --ic-grey: #475569;

  /* ---------- bonita rating ---------- */
  --bonita-green: #16c95f;
  --bonita-green-ink: #06371b;
  --bonita-lime: #9bd60a;
  --bonita-lime-ink: #2c3a00;
  --bonita-amber: #ffc01f;
  --bonita-amber-ink: #4a3500;
  --bonita-rose: #ff5a4d;
  --bonita-rose-ink: #3d0e05;
  --bonita-grey: #6b7177;
  --bonita-grey-ink: #ffffff;

  --avatar-cyan: #17bce8;

  /* ---------- comms channel brand glyph colors (flat icon, no tile — §0) ---------- */
  --channel-wa: #1d9c40; /* brand: WhatsApp */
  --channel-fb: #3a5fe0; /* brand: Messenger */
  --channel-li: #2f6fc9; /* brand: LinkedIn */
  --channel-ig: #c13584; /* brand: Instagram */

  /* ---------- SEMANTIC TOKENS — use these in components ---------- */
  --bg: var(--surface-75);
  --bg-canvas: var(--surface-100);
  --sidebar-bg: var(--surface-75);
  --shell-bg: #efeff1;
  --fg: var(--ink-900);
  --fg-secondary: var(--ink-500);
  --fg-muted: var(--ink-400);
  --fg-on-accent: var(--white);

  --border: var(--line-200);
  --border-strong: var(--line-300);
  --hover-surface: var(--surface-50);
  --active-surface: #eeeff1;

  --accent: var(--blue-500);
  --accent-press: var(--blue-600);
  --accent-tint: var(--blue-100);
  --accent-ink: var(--blue-ink);
  --ring: var(--blue-500);

  /* ---------- radii (rounded set) ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ---------- spacing scale (2·4·6·8·12·16·24·40) ---------- */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 40px;

  /* ---------- density ---------- */
  --row-h: 37px;
  --row-h-nav: 28px;
  --cell-px: 15px;
  --cell-px-sm: 5px;
  --topbar-h: 49px;
  --sidebar-w: 261px;
  --control-h: 30px;

  /* ---------- icon sizes ---------- */
  --ico-2xs: 12px;
  --ico-xs: 14px;
  --ico-sm: 16px;
  --ico-md: 18px;
  --ico-lg: 20px;
  --ico-stroke: 1.5px;

  /* ---------- elevation ---------- */
  --shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 3px 8px 0 rgba(0, 0, 0, 0.07);
  --shadow-md: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
  --shadow-pop: 0 16px 40px -10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* ---------- type families ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Manrope', 'Inter', ui-sans-serif, sans-serif;
  --font-mono: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ---------- type tracking ---------- */
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-eyebrow: 0.05em;

  /* ---------- SEMANTIC TYPE ---------- */
  --h1: 600 16px/1.2 var(--font-display);
  --h2: 600 15px/1.25 var(--font-display);
  --h3: 600 13px/1.35 var(--font-display);
  --kpi: 600 23px/1 var(--font-display);
  --section: 600 12px/1.2 var(--font-sans);
  --label: 600 12px/22px var(--font-display);
  --p: 400 13px/1.5 var(--font-sans);
  --cell: 500 13px/22px var(--font-sans);
  --small: 500 12px/1.4 var(--font-sans);
  --overline: 500 11px/1 var(--font-sans);
  --mono: 500 12px/1.4 var(--font-mono);
  --subtitle: 400 13px/1.5 var(--font-sans);
}

/* Dark mode: set data-theme="dark" on <html>. */
[data-theme='dark'] {
  --ink-900: #eceded;
  --ink-800: #e1e2e4;
  --ink-700: #cccdd1;
  --ink-600: #aeb0b5;
  --ink-500: #9a9ca1;
  --ink-400: #717479;
  --ink-300: #565a60;
  --line-300: #3a3c42;
  --line-200: #2a2c31;
  --line-100: #232529;
  --surface-100: #1b1c1f;
  --surface-75: #161719;
  --surface-50: #232529;

  --blue-600: #3f78e8;
  --blue-500: #4b86f5;
  --blue-100: #1d2842;
  --blue-ink: #9dc0ff;
  --selected: #19223a;

  --positive: #46b483;
  --positive-subtle: #15271f;
  --positive-ink: #7fd6a8;
  --warning: #d6a94a;
  --warning-subtle: #2a2410;
  --warning-ink: #ddbf78;
  --critical: #e2674f;
  --critical-subtle: #2b1713;
  --critical-ink: #f0a18d;
  --info: #4b86f5;
  --info-subtle: #16213c;
  --info-ink: #9dc0ff;

  /* soft attribute pills — dark translucent fills, lighter ink (re-synced from DS
     colors_and_type.css; entity --ic-* tiles + bonita stay vivid in dark by design) */
  --pill-lime-bg: #242712;
  --pill-lime-ink: #c4d06a;
  --pill-amber-bg: #2a2410;
  --pill-amber-ink: #d8bd7a;
  --pill-blue-bg: #1a2540;
  --pill-blue-ink: #9dc0ff;
  --pill-purple-bg: #221c3a;
  --pill-purple-ink: #b9a3f5;
  --pill-green-bg: #16271d;
  --pill-green-ink: #8fd6a8;
  --pill-rose-bg: #2a1820;
  --pill-rose-ink: #e89fb0;
  --pill-grey-bg: #26282d;
  --pill-grey-ink: #b0b2b7;

  --shell-bg: #141518;
  --bg: var(--surface-75);
  --bg-canvas: var(--surface-100);
  --hover-surface: var(--surface-50);
  --active-surface: #2d2f35;
  --border: var(--line-200);
  --border-strong: var(--line-300);

  --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 18px 0 rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 12px 34px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---- convenience element defaults (optional; opt-in via .ds-scope) ---- */
.ds-scope {
  color: var(--fg);
  font: var(--p);
  font-feature-settings:
    'cv05' 1,
    'cv08' 1,
    'ss01' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
.ds-scope h1 {
  font: var(--h1);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ds-scope h2 {
  font: var(--h2);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ds-scope h3 {
  font: var(--h3);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ds-scope .overline {
  font: var(--overline);
  color: var(--fg-secondary);
}
.ds-scope .data-mono {
  font: var(--mono);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}