/* =========================================================
   eeBox Design System — TOKENS  (fonte única de verdade)
   ---------------------------------------------------------
   Carregar ANTES de qualquer outro CSS. Nunca use cores, raios
   ou sombras "soltos" nos módulos: use estes tokens (direto ou
   mapeados para variáveis do módulo, ex.: --crm-line: var(--ds-line)).
   O tema escuro troca só os tokens — os componentes não mudam.
   Catálogo visual: ds.html
   ========================================================= */
:root {
  /* ---- Tipografia ---- */
  --ds-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-text-2xs: 11px;
  --ds-text-xs: 12px;
  --ds-text-sm: 13px;
  --ds-text-md: 14px;     /* corpo padrão dos módulos */
  --ds-text-base: 15px;   /* corpo do chat */
  --ds-text-lg: 17px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 24px;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-leading: 1.5;

  /* ---- Espaçamento (escala de 4px) ---- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;

  /* ---- Raios ---- */
  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;   /* botões, campos */
  --ds-radius-lg: 14px;   /* cards pequenos */
  --ds-radius-xl: 16px;   /* cards, painéis */
  --ds-radius-2xl: 20px;  /* modais, cards de configuração */
  --ds-radius-pill: 999px;

  /* ---- Alturas de controles ---- */
  --ds-control-sm: 30px;
  --ds-control-md: 34px;
  --ds-control-lg: 38px;
  --ds-touch: 40px;       /* alvo mínimo no celular */

  /* ---- Movimento ---- */
  --ds-ease: cubic-bezier(.22, 1, .36, 1);
  --ds-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ds-dur-fast: .15s;
  --ds-dur: .2s;
  --ds-dur-slow: .4s;

  /* ---- Camadas (z-index) ---- */
  --ds-z-sticky: 8;
  --ds-z-drawer: 10;
  --ds-z-artifact-mobile: 25;
  --ds-z-popover: 50;
  --ds-z-modal: 70;
  --ds-z-lightbox: 80;
  --ds-z-toast: 90;

  /* ---- Cores: superfícies (claro) ---- */
  --ds-bg: #ffffff;              /* fundo da página */
  --ds-sunken: #f7f7f6;          /* fundo de módulos (atrás dos cards) */
  --ds-surface: #ffffff;         /* cards, painéis, gavetas */
  --ds-surface-2: #f5f5f5;       /* campos preenchidos, segmentos */
  --ds-overlay: rgb(0 0 0 / .18);
  --ds-line: rgb(0 0 0 / .08);
  --ds-line-strong: rgb(0 0 0 / .14);
  --ds-hover: rgb(0 0 0 / .035);
  --ds-active: rgb(0 0 0 / .06);

  /* ---- Cores: texto ---- */
  --ds-text: #262626;
  --ds-text-strong: #0d0d0d;
  --ds-text-muted: #737373;
  --ds-text-subtle: #a3a3a3;
  --ds-on-inverse: #ffffff;
  --ds-inverse: #0d0d0d;         /* botão primário */

  /* ---- Cores: marca e estados ---- */
  --ds-accent: #7c3aed;
  --ds-accent-text: #6d28d9;
  --ds-accent-soft: rgb(124 58 237 / .1);
  --ds-accent-ring: rgb(124 58 237 / .14);
  --ds-success: #16a34a;
  --ds-success-text: #15803d;
  --ds-success-soft: rgb(34 197 94 / .12);
  --ds-warning: #f59e0b;
  --ds-warning-text: #b45309;
  --ds-warning-soft: rgb(245 158 11 / .14);
  --ds-danger: #dc2626;
  --ds-danger-text: #b91c1c;
  --ds-danger-soft: rgb(239 68 68 / .1);
  --ds-info: #0ea5e9;
  --ds-info-text: #0369a1;
  --ds-info-soft: rgb(14 165 233 / .12);

  /* ---- Paleta de identificação (avatares, agendas, etiquetas) ---- */
  --ds-id-1: #8b5cf6; --ds-id-2: #0ea5e9; --ds-id-3: #10b981; --ds-id-4: #f97316;
  --ds-id-5: #f43f5e; --ds-id-6: #6366f1; --ds-id-7: #14b8a6; --ds-id-8: #eab308;

  /* ---- Sombras ---- */
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --ds-shadow-md: 0 4px 18px -8px rgb(0 0 0 / .18);
  --ds-shadow-lg: 0 20px 40px -12px rgb(0 0 0 / .25);
  --ds-focus: 0 0 0 3px var(--ds-accent-ring);
}

.dark {
  --ds-bg: #212121;
  --ds-sunken: #141414;
  --ds-surface: #1e1e1e;
  --ds-surface-2: #2a2a2a;
  --ds-overlay: rgb(0 0 0 / .4);
  --ds-line: rgb(255 255 255 / .08);
  --ds-line-strong: rgb(255 255 255 / .16);
  --ds-hover: rgb(255 255 255 / .04);
  --ds-active: rgb(255 255 255 / .07);

  --ds-text: #f5f5f5;
  --ds-text-strong: #ffffff;
  --ds-text-muted: #a3a3a3;
  --ds-text-subtle: #737373;
  --ds-on-inverse: #0d0d0d;
  --ds-inverse: #ffffff;

  --ds-accent: #a78bfa;
  --ds-accent-text: #c4b5fd;
  --ds-accent-soft: rgb(167 139 250 / .15);
  --ds-accent-ring: rgb(139 92 246 / .22);
  --ds-success-text: #4ade80;
  --ds-warning-text: #fcd34d;
  --ds-danger-text: #f87171;
  --ds-info-text: #7dd3fc;

  --ds-shadow-md: 0 4px 18px -8px rgb(0 0 0 / .5);
  --ds-shadow-lg: 0 20px 40px -12px rgb(0 0 0 / .6);
}