/* ========================================================================
   HRZ OPS — Design Tokens v1
   ------------------------------------------------------------------------
   Minimal design system foundation. ALL UI must derive color, type,
   spacing, radii, shadow, and button styles from these tokens.
   NEVER hardcode hex/px values directly in view styles.

   IMPORTANT: This file must be loaded BEFORE any view-specific CSS so
   that downstream stylesheets can override or compose on top of it.

   Layout: Mobile-first. All media queries use min-width.
   A11y: WCAG AA minimum (4.5:1 contrast on normal text).
   ======================================================================== */

/* ========================================================================
   GROUP A — SEMANTIC COLORS
   ------------------------------------------------------------------------
   PRINCIPLE: The FUNCTION of the data defines the color, NOT the category.
     - "Resposta em 9h" → DANGER (breached SLA), even if the metric category
       is "operacional".
     - "Cliente em risco de churn" → WARNING (attention required), even if
       the category is "financeiro".
   Do NOT use gamification colors for status. Reserve them for tier badges.
   ======================================================================== */

:root {
  /* DANGER — métrica fora de SLA, breach, ação imediata.
     Use para: erros, SLA estourado, cancelamentos, falhas críticas. */
  --color-danger-50:  #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-500: #dc2626; /* contraste 5.74:1 sobre branco ✓ AA */
  --color-danger-700: #991b1b;
  --color-danger-bg:  rgba(220, 38, 38, 0.08); /* fundo sutil para cards */

  /* WARNING — atenção, em risco, prazo se aproximando.
     Use para: pendências, follow-ups, métricas se degradando. */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-500: #d97706; /* contraste 4.54:1 sobre branco ✓ AA */
  --color-warning-700: #92400e;
  --color-warning-bg:  rgba(217, 119, 6, 0.08);

  /* SUCCESS — dentro da meta, saudável, completo.
     Use para: aprovações, metas batidas, tarefas concluídas. */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-500: #16a34a; /* contraste 4.54:1 sobre branco ✓ AA */
  --color-success-700: #166534;
  --color-success-bg:  rgba(22, 163, 74, 0.08);

  /* INFO — informativo, neutro com tom positivo, link primário.
     Use para: links, ações primárias, tags informativas. */
  --color-info-50:  #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-500: #2563eb; /* contraste 5.17:1 sobre branco ✓ AA */
  --color-info-700: #1e40af;
  --color-info-bg:  rgba(37, 99, 235, 0.08);

  /* NEUTRAL — sem dados, inativo, secundário, base de UI.
     Use para: backgrounds, bordas, textos secundários, estados vazios. */
  --color-neutral-50:  #f9fafb; /* surface base — page bg */
  --color-neutral-100: #f3f4f6; /* surface elevada — card bg */
  --color-neutral-200: #e5e7eb; /* borders default */
  --color-neutral-400: #9ca3af; /* texto desabilitado, ícones secundários */
  --color-neutral-500: #6b7280; /* texto secundário, labels */
  --color-neutral-700: #374151; /* texto corpo */
  --color-neutral-900: #111827; /* texto headings, valores numéricos */

  /* GAMIFICATION — EXCLUSIVO para ranking/tier de gestor.
     NUNCA usar para status genérico. Cada cor mapeia para um nível fixo. */
  --color-gamification-diamond: #06b6d4; /* tier 1 — top performer */
  --color-gamification-gold:    #d97706; /* tier 2 */
  --color-gamification-silver:  #94a3b8; /* tier 3 */
  --color-gamification-bronze:  #b45309; /* tier 4 */
  --color-gamification-iron:    #6b7280; /* tier 5 — entrada */
}

/* Dark mode — invertemos as escalas neutras e abrimos os tints semânticos.
   As cores semânticas mantêm os mesmos hexes (são calibrados para AA em
   ambos os temas), apenas os backgrounds e textos neutros mudam. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral-50:  #1f2937; /* page bg dark */
    --color-neutral-100: #111827; /* card bg dark — invertido pra contraste */
    --color-neutral-200: #374151; /* bordas */
    --color-neutral-400: #6b7280;
    --color-neutral-500: #9ca3af; /* texto secundário no dark */
    --color-neutral-700: #d1d5db; /* texto corpo no dark */
    --color-neutral-900: #f9fafb; /* texto principal no dark */

    /* Backgrounds semânticos mais escuros no dark — evita "queimar" o olho */
    --color-danger-bg:  rgba(220, 38, 38, 0.15);
    --color-warning-bg: rgba(217, 119, 6, 0.15);
    --color-success-bg: rgba(22, 163, 74, 0.15);
    --color-info-bg:    rgba(37, 99, 235, 0.15);
  }
}

/* ========================================================================
   GROUP B — TYPOGRAPHIC SCALE (Modular, ratio 1.25 "Major Third")
   ------------------------------------------------------------------------
   Hierarquia clara de 8 níveis. Use as classes utilitárias (.text-*) ao
   invés de aplicar font-size cru. Números grandes sempre com tabular-nums
   para alinhamento vertical em tabelas/dashboards.
   ======================================================================== */

:root {
  --font-size-caption: 12px;  /* labels, captions, badges */
  --font-size-body:    14px;  /* texto padrão de UI */
  --font-size-body-lg: 16px;  /* texto de leitura longa */
  --font-size-h3:      18px;  /* títulos de seção (cards) */
  --font-size-h2:      24px;  /* títulos de bloco */
  --font-size-h1:      32px;  /* título de página */
  --font-size-display: 40px;  /* KPI hero values */
  --font-size-hero:    48px;  /* megavalor, dashboard splash */

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

  --line-height-tight:   1.2;  /* headings, números */
  --line-height-normal:  1.5;  /* corpo de texto */
  --line-height-relaxed: 1.75; /* leitura longa */

  --letter-spacing-tight:  -0.02em; /* display/hero — mais densidade */
  --letter-spacing-normal:  0;
  --letter-spacing-caps:    0.06em; /* labels em UPPERCASE */
}

/* Utility classes — preferir estas a font-size cru no view CSS. */

.text-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.text-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.text-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-body-lg {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

.text-caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* Label UPPERCASE — para labels secundários em cards/KPI */
.text-label-caps {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--color-neutral-500);
}

/* Números — sempre tabular para alinhamento vertical em colunas */
.text-number-hero {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
}

.text-number-2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.text-number-3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Color helpers — combinam com escala de cores */
.text-muted    { color: var(--color-neutral-500); }
.text-strong   { color: var(--color-neutral-900); }
.text-danger   { color: var(--color-danger-500); }
.text-warning  { color: var(--color-warning-500); }
.text-success  { color: var(--color-success-500); }
.text-info     { color: var(--color-info-500); }

/* ========================================================================
   GROUP C — SPACING (4px base, geometric scale)
   ------------------------------------------------------------------------
   Escala restrita força consistência. Não criar valores intermediários.
   Use stack (space-y) e inline (space-x) ou apenas o token isolado.
   ======================================================================== */

:root {
  --space-0:   0;
  --space-1:   4px;   /* gap micro — dentro de badges, chips */
  --space-2:   8px;   /* gap pequeno — entre ícone+texto */
  --space-3:  12px;   /* gap intermediário */
  --space-4:  16px;   /* gap padrão — entre campos de form */
  --space-6:  24px;   /* gap entre elementos relacionados (card padding) */
  --space-8:  32px;   /* gap entre seções */
  --space-12: 48px;   /* gap entre blocos principais da página */
  --space-16: 64px;   /* margem de página, hero spacing */
}

/* ========================================================================
   GROUP D — BORDER RADIUS
   ------------------------------------------------------------------------
   5 níveis cobrem 100% dos casos. NUNCA usar valores fora desta escala.
   ======================================================================== */

:root {
  --radius-sm:    4px; /* tags, badges pequenas */
  --radius-md:    8px; /* inputs, botões, chips */
  --radius-lg:   12px; /* cards padrão */
  --radius-xl:   16px; /* modais, sheets, cards destacados */
  --radius-full: 9999px; /* pills, avatares circulares */
}

/* ========================================================================
   GROUP E — SHADOWS (elevation hierarchy)
   ------------------------------------------------------------------------
   4 níveis de elevação. shadow-focus é especial — usar em :focus-visible
   para a11y de navegação por teclado.
   ======================================================================== */

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07),
               0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10),
               0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10),
               0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35); /* outline a11y */
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4),
                 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5),
                 0 4px 6px rgba(0, 0, 0, 0.3);
  }
}

/* ========================================================================
   GROUP F — BUTTON HIERARCHY (4+ levels)
   ------------------------------------------------------------------------
   REGRA DE OURO: máximo 1 botão PRIMARY por viewport.
   Hierarquia:
     primary     → ação principal (1 por tela)
     secondary   → ação alternativa (outline)
     tertiary    → ação terciária / link-like
     destructive → deletar, rejeitar (uso parcimonioso)
     success     → aprovar, confirmar positivo

   A11y: min-height 40px (alvo de toque WCAG 2.5.5),
         focus visível via box-shadow (não substituir outline padrão
         por nada — sempre dar feedback de foco a teclado).
   ======================================================================== */

.btn-ds {
  /* Base — todos os botões herdam daqui */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 40px; /* WCAG 2.5.5 — alvo de toque mínimo 24x24 CSS px;
                       40px dá folga confortável também em mobile */
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out,
              color 150ms ease-out,
              border-color 150ms ease-out,
              box-shadow 150ms ease-out;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-ds:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-ds:disabled,
.btn-ds[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- PRIMARY — máximo 1 por viewport. Ação dominante. ------------------- */
.btn-ds--primary {
  background: var(--color-info-500);
  color: #ffffff;
}
.btn-ds--primary:hover {
  background: var(--color-info-700);
}
.btn-ds--primary:active {
  background: var(--color-info-700);
  transform: translateY(1px);
}

/* --- SECONDARY — ação alternativa, mesma cor mas em outline ------------- */
.btn-ds--secondary {
  background: transparent;
  color: var(--color-info-500);
  border-color: var(--color-info-500);
}
.btn-ds--secondary:hover {
  background: var(--color-info-50);
}
.btn-ds--secondary:active {
  background: var(--color-info-100);
}

/* --- TERTIARY — ghost/link, ações terciárias ---------------------------- */
.btn-ds--tertiary {
  background: transparent;
  color: var(--color-neutral-700);
}
.btn-ds--tertiary:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
}
.btn-ds--tertiary:active {
  background: var(--color-neutral-200);
}

/* --- DESTRUCTIVE — delete, rejeitar, cancelar irreversível -------------- */
.btn-ds--destructive {
  background: var(--color-danger-500);
  color: #ffffff;
}
.btn-ds--destructive:hover {
  background: var(--color-danger-700);
}
.btn-ds--destructive:active {
  background: var(--color-danger-700);
  transform: translateY(1px);
}

/* --- SUCCESS — aprovar, confirmar (use com moderação) ------------------- */
.btn-ds--success {
  background: var(--color-success-500);
  color: #ffffff;
}
.btn-ds--success:hover {
  background: var(--color-success-700);
}
.btn-ds--success:active {
  background: var(--color-success-700);
  transform: translateY(1px);
}

/* --- SIZES — escala uniforme. Padrão é sem modificador (size = md). ----- */
.btn-ds--sm {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-caption);
  border-radius: var(--radius-sm);
}

.btn-ds--lg {
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-body-lg);
}

/* Botão full-width — útil em mobile e modais */
.btn-ds--block {
  width: 100%;
}

/* Botão icon-only — quadrado, foco em ícone */
.btn-ds--icon {
  min-width: 40px;
  padding: var(--space-2);
}
.btn-ds--icon.btn-ds--sm { min-width: 32px; }
.btn-ds--icon.btn-ds--lg { min-width: 48px; }

/* ========================================================================
   END — design-tokens-v1.css
   ======================================================================== */