/* ==========================================================================
   KEL CRM SaaS — DESIGN SYSTEM CANONICAL TOKENS (design-system/tokens.css)
   Fonte da Verdade: /DESIGN.md
   ========================================================================== */

:root {
  /* 1. Tokens Dinâmicos White-Label (Sobrescritos por Tenant em Tempo Real) */
  --brand-color: #00E676;
  --brand-hover: #00C853;
  --brand-light: rgba(0, 230, 118, 0.14);
  --brand-ring: rgba(0, 230, 118, 0.35);

  /* 2. Tipografia Canônica (Inter + Plus Jakarta Sans + Tabular Nums) */
  --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ds-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-numeric: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 3. Superfícies — Modo Claro (Light Mode Default Variables) */
  --ds-bg-canvas: #F8FAFC;
  --ds-bg-chrome: #FFFFFF;
  --ds-bg-surface: #FFFFFF;
  --ds-bg-elevated: #F1F5F9;
  --ds-border-subtle: #E2E8F0;
  --ds-border-strong: #CBD5E1;
  --ds-text-primary: #0F172A;
  --ds-text-secondary: #475569;
  --ds-text-muted: #64748B;

  /* 4. Cores Semânticas de Status */
  --ds-success: #10B981;
  --ds-success-bg: rgba(16, 185, 129, 0.14);
  --ds-success-border: rgba(16, 185, 129, 0.30);

  --ds-warning: #F59E0B;
  --ds-warning-bg: rgba(245, 158, 11, 0.14);
  --ds-warning-border: rgba(245, 158, 11, 0.30);

  --ds-danger: #F43F5E;
  --ds-danger-bg: rgba(244, 63, 94, 0.14);
  --ds-danger-border: rgba(244, 63, 94, 0.30);

  --ds-info: #06B6D4;
  --ds-info-bg: rgba(6, 182, 212, 0.14);
  --ds-info-border: rgba(6, 182, 212, 0.30);

  /* 5. Raios de Borda & Elevação */
  --ds-radius-sm: 0.5rem;    /* 8px */
  --ds-radius-md: 0.75rem;   /* 12px - rounded-xl */
  --ds-radius-lg: 1rem;      /* 16px - rounded-2xl */
  --ds-radius-pill: 9999px;  /* rounded-full */

  --ds-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --ds-shadow-elevated: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
}

/* Superfícies — Modo Escuro (Dark Mode Executive) */
html.dark, .dark {
  --ds-bg-canvas: #0B0F17;
  --ds-bg-chrome: #0E1522;
  --ds-bg-surface: #111827;
  --ds-bg-elevated: #162032;
  --ds-border-subtle: #1E293B;
  --ds-border-strong: #334155;
  --ds-text-primary: #F8FAFC;
  --ds-text-secondary: #94A3B8;
  --ds-text-muted: #64748B;
}

/* Garantias Tipográficas Globais (Proibição de Space Mono em números/tabelas) */
body {
  font-family: var(--ds-font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

.font-mono,
.ds-numeric,
.tabular-nums,
code,
pre {
  font-family: var(--ds-font-numeric) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Classes Utilitárias de Componentes Canônicos */
.ds-surface {
  background-color: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg);
}

.ds-btn-primary {
  background-color: var(--brand-color);
  color: #000000;
  font-weight: 700;
  border-radius: var(--ds-radius-md);
  transition: all 0.15s ease;
}
.ds-btn-primary:hover:not(:disabled) {
  background-color: var(--brand-hover);
  transform: translateY(-1px);
}
.ds-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}
.ds-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.ds-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ds-input {
  background-color: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-input:focus {
  outline: none;
  border-color: var(--brand-color);
  box-shadow: 0 0 0 2px var(--brand-light);
}