/**
 * Design Tokens - Controle de Clientes
 * Tema: ESCURO (dark navy)
 */

:root {
  /* ═══ CORES ═══ */
  /* Texto e Superfícies */
  --color-ink: #E8EDFB;          /* texto principal — off-white azulado */
  --color-bg: #0B1221;           /* fundo geral — navy bem escuro */
  --color-surface: #111927;      /* cards, modais, topbar */
  --color-surface-alt: #162038;  /* superfície elevada: hover de row, inputs */
  --color-border: #1C2A42;       /* bordas sutis */
  --color-text-muted: #7B93B8;   /* labels, texto secundário */

  /* Sidebar (mais escura que o bg para criar profundidade) */
  --color-sidebar-bg: #080F1D;

  /* Ação Primária e Marca */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: rgba(37, 99, 235, 0.15);  /* fundo leve de destaque azul */

  /* Status semânticos — fundos e textos legíveis no dark */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-success-text: #34D399;    /* verde claro legível no escuro */

  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-warning-text: #FCD34D;    /* amarelo claro legível */

  --color-danger: #EF4444;
  --color-danger-bg: rgba(239, 68, 68, 0.12);
  --color-danger-text: #F87171;     /* vermelho claro legível */

  /* Neutros */
  --color-inactive: #3F5470;
  --color-inactive-bg: rgba(148, 163, 184, 0.08);

  /* ═══ TIPOGRAFIA ═══ */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* ═══ ESPAÇAMENTO ═══ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* ═══ RAIO DE BORDA ═══ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ═══ SOMBRAS (mais fortes no dark) ═══ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);

  /* ═══ TRANSIÇÕES ═══ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══ Z-INDEX ═══ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 500;
  --z-toast: 600;
  --z-auth: 999;
}

/* ═══ UTILITÁRIOS DE TIPOGRAFIA ═══ */
.tabular-nums { font-variant-numeric: tabular-nums; }

.currency, .date-value, table td.amount, table td.date {
  font-variant-numeric: tabular-nums;
}

/* ═══ RESET BASE ═══ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

/* ═══ CLASSES UTILITÁRIAS ═══ */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

.text-ink     { color: var(--color-ink); }
.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success-text); }
.text-warning { color: var(--color-warning-text); }
.text-danger  { color: var(--color-danger-text); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }

.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }