/* ============================================================
   EVER UI — 03 COMPONENTS · v1.0.0 · 2026-07-09 · @dev-designer
   ============================================================
   Camada 3 de 3. Component-tokens: consomem APENAS semantic (02)
   + escalas de 01 (radius/space/motion). Componentes React
   (shadcn) e Alpine consomem ESTES tokens — nunca primitives.

   ⚠️ SCOPING (fix 2026-07-09, achado no audit F2): este bloco é
   declarado TAMBÉM em [data-surface="console"]/[data-surface="dark"]/
   [data-surface="stage"]. Custom property cujo valor é var(--semantic)
   resolve no ELEMENTO que DECLARA e herda o resultado "assado" — só
   re-resolve por superfície se re-declarada em cada escopo. Sem as
   linhas extras de seletor, --card-bg/--field-bg/--menu-bg/
   --table-header-bg/--btn-primary-bg etc. ficavam presos no valor do
   console (light) dentro do dark/stage, quebrando o dark mode dos
   componentes.
   [data-surface="console"] entra no fix F3 2.5: "ilha clara"
   (data-surface="console") dentro de um stage re-resolve os
   component-tokens de volta pro console — junto com o reset semântico
   :root,[data-surface="console"] no 02, um card claro autocontido
   dentro do palco público (ex.: /assinar) fica legível sem depender
   só de disciplina de uso.
   ============================================================ */

:root,
[data-surface="console"],
[data-surface="dark"],
[data-surface="stage"] {
  /* ==========================================================
     Z-INDEX — ESCALA FIXA (gotcha F45 — 3 bugs em produção).
     NUNCA criar valor fora desta escala. NUNCA z-index solto.
       dropdown 50 < overlay 100 < drawer 110 < modal 120 < toast 130
     · --z-modal: SÓ lightbox/viewer (alert-dialog está FORA do kit)
     · menu dentro de Sheet/drawer: modal={false} + z-modal (F45)
     · menu dentro de Dialog topo-de-pilha: NÃO há z acima de 130
       → usar botão INLINE, sem portal (F45 3ª ocorrência)
     ========================================================== */
  --z-base:     0;
  --z-header:   10;
  --z-sticky:   20;
  --z-dropdown: 50;
  --z-overlay:  100;   /* scrim de drawer/sheet/modal */
  --z-sheet:    100;   /* alias — bottom-sheet vive no nível do overlay */
  --z-drawer:   110;
  --z-modal:    120;   /* SÓ lightbox/viewer fullscreen */
  --z-toast:    130;   /* teto absoluto da pilha */

  /* ==========================================================
     BOTÃO (6 estados: default/hover/focus/active/disabled/loading)
     ========================================================== */
  --btn-h:            var(--control-h);
  --btn-h-sm:         var(--control-h-sm);
  --btn-h-lg:         var(--control-h-lg);
  --btn-h-xs:         30px;              /* densidade — toolbars, chips de ação (size xs) */
  --btn-h-cta:        var(--tap-cta);    /* 56 — CTA primário mobile/público (size cta) */
  --btn-radius:       var(--radius);
  --btn-px:           var(--space-4);
  --btn-font-size:    var(--text-base);
  --btn-font-weight:  var(--weight-semibold);
  --btn-gap:          var(--space-2);

  --btn-primary-bg:        var(--action);
  --btn-primary-fg:        var(--text-on-action);
  --btn-primary-hover:     var(--action-hover);
  --btn-primary-active:    var(--action-active);
  --btn-primary-shadow:    var(--shadow-xs);

  --btn-secondary-bg:      var(--surface-card);
  --btn-secondary-fg:      var(--text-body);
  --btn-secondary-border:  var(--border-default);
  --btn-secondary-hover:   var(--surface-subtle);

  /* Outline — o "cavalo de batalha" (borda + card). Distinto de secondary:
     no hover muda a BORDA (border-strong), não só o fundo. Tudo semantic →
     sobrevive a data-surface="dark"/"stage". */
  --btn-outline-bg:            var(--surface-card);
  --btn-outline-fg:            var(--text-body);
  --btn-outline-border:        var(--border-default);
  --btn-outline-hover-bg:      var(--surface-subtle);
  --btn-outline-hover-border:  var(--border-strong);

  /* Brand — CTA branded do palco público. Ancorado na ESCALA DE MARCA
     (--brand-500/-600/-700 resolvidos por --brand-h/--brand-c do branding.ts),
     NÃO em --action: pinta com a cor do tenant em qualquer superfície.
     Rótulo BOLD ≥16px (brand-500 = AA-large 4.00:1 c/ text-on-brand). */
  --btn-brand-bg:          var(--brand-500);
  --btn-brand-fg:          var(--text-on-brand);
  --btn-brand-hover:       var(--brand-600);
  --btn-brand-active:      var(--brand-700);
  --btn-brand-shadow:      var(--shadow-xs);

  --btn-ghost-fg:          var(--text-secondary);
  --btn-ghost-hover-bg:    var(--surface-subtle);

  /* Danger consome o par DEDICADO, que recalibra por superfície
     (fix audit F2b). Nunca --danger (texto de feedback) como fundo. */
  --btn-danger-bg:         var(--danger-action);
  --btn-danger-fg:         var(--text-on-danger);
  --btn-danger-hover:      var(--danger-action-hover);

  --btn-disabled-opacity:  0.5;   /* + cursor:not-allowed + pointer-events off */
  --btn-focus-ring:        var(--focus-ring);

  /* ==========================================================
     CAMPO DE FORMULÁRIO (input/select/date 100% estilizados —
     nunca deixar o browser desenhar; saas-premium §0)
     ========================================================== */
  --field-h:              var(--control-h);
  --field-h-lg:           var(--control-h-lg);
  --field-radius:         var(--radius);
  --field-px:             var(--space-3);
  --field-bg:             var(--surface-card);
  --field-bg-readonly:    var(--surface-inset);
  --field-border:         var(--border-default);
  --field-border-hover:   var(--border-strong);
  --field-border-focus:   var(--action);
  --field-focus-ring:     var(--focus-ring);
  --field-placeholder:    var(--text-tertiary);
  --field-icon:           var(--text-tertiary);   /* chevron/ícone próprio */
  --field-label-fg:       var(--text-body);
  --field-label-size:     var(--text-sm);
  --field-hint-fg:        var(--text-secondary);
  --field-error-fg:       var(--danger-strong);
  --field-error-border:   var(--red-500);
  --field-error-bg:       var(--danger-bg);

  /* ==========================================================
     TABELA DENSA (números à direita, tabular-nums, menos moldura)
     ========================================================== */
  --table-row-h:           var(--row-height);
  --table-row-h-compact:   40px;
  --table-header-fg:       var(--text-secondary);
  --table-header-bg:       var(--surface-card);   /* sticky: mesmo bg + hairline */
  --table-header-size:     var(--text-xs);
  --table-header-tracking: var(--tracking-wide);
  --table-hairline:        var(--hairline);
  --table-row-hover:       var(--surface-subtle);
  --table-row-selected:    var(--action-soft);
  --table-row-selected-edge: var(--action);       /* barra 2-3px à esquerda */
  --table-cell-px:         var(--space-3);
  --table-sticky-shadow:   0 1px 0 var(--hairline);

  /* ==========================================================
     BADGE DE STATUS — 5 receitas semânticas (bg/fg/dot).
     Produto cria ALIASES por domínio no tema (vocabulário do
     domain-model), apontando pra estas receitas. Sempre
     rótulo + cor, nunca cor sozinha (F24).
     ========================================================== */
  --badge-h:         22px;
  --badge-radius:    var(--radius-pill);
  --badge-px:        var(--space-2);
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--weight-medium);

  --badge-neutral-bg:  var(--neutral-200);
  --badge-neutral-fg:  var(--neutral-700);
  --badge-neutral-dot: var(--neutral-400);

  --badge-muted-bg:    var(--neutral-200);   /* terminal apagado (cancelado) */
  --badge-muted-fg:    var(--neutral-600);
  --badge-muted-dot:   var(--neutral-400);

  --badge-success-bg:  var(--green-100);
  --badge-success-fg:  var(--green-700);
  --badge-success-dot: var(--green-500);

  --badge-info-bg:     var(--blue-100);
  --badge-info-fg:     var(--blue-700);
  --badge-info-dot:    var(--blue-500);

  --badge-warning-bg:  var(--amber-100);
  --badge-warning-fg:  var(--amber-700);
  --badge-warning-dot: var(--amber-500);

  --badge-danger-bg:   var(--red-50);
  --badge-danger-fg:   var(--red-700);
  --badge-danger-dot:  var(--red-500);
  --badge-danger-edge: var(--red-500);   /* borda-esquerda 3px em linha de alerta */

  /* ==========================================================
     APP SHELL — sidebar + topbar (nav ativo ≠ pílula marca-texto:
     fundo sutil + barra 3px + texto reforçado — redesign M5)
     ========================================================== */
  --shell-sidebar-w:          var(--sidebar-width);
  --shell-sidebar-w-collapsed: var(--sidebar-collapsed);
  --shell-sidebar-bg:         var(--surface-card);
  --shell-sidebar-border:     var(--border-subtle);
  --shell-topbar-h:           var(--header-height);
  --shell-topbar-bg:          var(--surface-card);

  --nav-item-h:          40px;
  --nav-item-radius:     var(--radius-sm);
  --nav-item-fg:         var(--text-secondary);
  --nav-item-icon:       var(--text-tertiary);
  --nav-item-hover-bg:   var(--surface-subtle);
  --nav-item-active-bg:  var(--action-soft);
  --nav-item-active-fg:  var(--action-soft-text);
  --nav-item-active-icon: var(--action-soft-text);
  --nav-item-active-bar: var(--action);   /* barra 3px à esquerda */
  --nav-group-label-fg:  var(--text-tertiary);

  /* ==========================================================
     SEGMENTED CONTROL — trilho afundado + thumb branco elevado
     (padrão iOS/Linear — redesign M6)
     ========================================================== */
  --seg-track-bg:     var(--surface-inset);
  --seg-track-border: var(--border-subtle);
  --seg-thumb-bg:     var(--surface-card);
  --seg-thumb-shadow: var(--shadow-sm);
  --seg-fg:           var(--text-secondary);
  --seg-fg-active:    var(--text-strong);
  --seg-radius:       var(--radius);
  --seg-h:            36px;

  /* ==========================================================
     CARD + STAT CARD — branco elevado; cor só no DADO (nunca
     retângulo colorido chapado — redesign M7)
     ========================================================== */
  --card-bg:      var(--surface-card);
  --card-border:  var(--border-subtle);
  --card-shadow:  var(--shadow-sm);
  --card-radius:  var(--radius-md);
  --card-p:       var(--space-5);

  --stat-label-fg:      var(--text-tertiary);   /* label uppercase pequeno */
  --stat-value-fg:      var(--text-primary);    /* número: tabular-nums (.num-display) */
  --stat-delta-up:      var(--green-600);
  --stat-delta-down:    var(--red-500);
  --stat-icon-size:     32px;
  --stat-chip-neutral-bg: var(--surface-inset);
  --stat-chip-neutral-fg: var(--text-secondary);
  --stat-chip-money-bg:   var(--green-50);
  --stat-chip-money-fg:   var(--green-700);
  --stat-chip-alert-bg:   var(--danger-bg);
  --stat-chip-alert-fg:   var(--red-700);
  --stat-chip-info-bg:    var(--info-bg);
  --stat-chip-info-fg:    var(--blue-700);
  --stat-alert-edge:      var(--red-500);       /* barra superior 2px, não fundo inteiro */

  --spark-stroke:    var(--action);
  --spark-positive:  var(--green-600);
  --spark-negative:  var(--red-500);

  /* ==========================================================
     DRAWER (lateral) + BOTTOM-SHEET (mobile) — a confirmação da
     casa (sem modal central; regra do Jean)
     ========================================================== */
  --drawer-w:        var(--drawer-width);
  --drawer-bg:       var(--surface-card);
  --drawer-shadow:   var(--shadow-drawer);
  --drawer-header-h: var(--header-height);
  --sheet-radius:    var(--radius-xl) var(--radius-xl) 0 0;
  --sheet-bg:        var(--surface-card);
  --sheet-shadow:    var(--shadow-sheet);
  --sheet-handle:    var(--border-strong);   /* alça 36×4px centrada */
  --overlay-scrim:   oklch(15% 0.01 var(--neutral-h) / 0.50);

  /* ==========================================================
     DROPDOWN MENU (ver docs/anatomia/dropdown-menu.md — F45)
     ========================================================== */
  --menu-bg:          var(--surface-card);
  --menu-border:      var(--border-subtle);
  --menu-shadow:      var(--shadow-md);
  --menu-radius:      var(--radius);
  --menu-item-h:      36px;
  --menu-item-fg:     var(--text-body);
  --menu-item-hover:  var(--surface-subtle);
  --menu-item-danger: var(--danger-strong);
  --menu-separator:   var(--hairline);

  /* ==========================================================
     TOAST (Sonner/custom) — sempre --z-toast, nunca acima
     ========================================================== */
  --toast-bg:      var(--neutral-800);
  --toast-fg:      var(--neutral-50);
  --toast-border:  oklch(100% 0 0 / 0.10);
  --toast-radius:  var(--radius-md);
  --toast-shadow:  var(--shadow-lg);
  --toast-success: var(--green-500);
  --toast-danger:  var(--red-500);
  --toast-warning: var(--amber-500);

  /* ==========================================================
     EMPTY STATE + SKELETON (desenhados, não caixa com texto)
     ========================================================== */
  --empty-icon-bg:   var(--surface-inset);   /* círculo tingido atrás do ícone */
  --empty-icon-fg:   var(--text-tertiary);
  --empty-icon-size: 48px;
  --empty-title-fg:  var(--text-primary);
  --empty-body-fg:   var(--text-secondary);
  --empty-maxw:      360px;

  --skeleton-base:      var(--neutral-150);
  --skeleton-highlight: var(--neutral-100);
  --skeleton-radius:    var(--radius-sm);

  /* ==========================================================
     TOOLTIP
     ========================================================== */
  --tooltip-bg:     var(--neutral-800);
  --tooltip-fg:     var(--neutral-50);
  --tooltip-radius: var(--radius-sm);
  --tooltip-size:   var(--text-xs);
}

/* Escuros: toast/tooltip invertem pra claro sobre a superfície escura */
[data-surface="dark"], [data-surface="stage"] {
  --toast-bg: var(--neutral-150);
  --toast-fg: var(--neutral-800);
  --tooltip-bg: var(--neutral-150);
  --tooltip-fg: var(--neutral-800);
  --skeleton-base: oklch(100% 0 0 / 0.08);
  --skeleton-highlight: oklch(100% 0 0 / 0.14);
  --overlay-scrim: oklch(5% 0.01 var(--neutral-h) / 0.60);
}

/* ============================================================
   FIX AUDIT F3 (2026-07-09) — BADGES no DARK (achado 2.2 + 3.3).
   No console os badges usam fills SÓLIDOS (green-100/amber-100/
   blue-100…) — no dark viram "adesivo claro" chapado, fora do
   padrão premium que o 02-semantic define pro feedback no dark:
   FILL TRANSLÚCIDO 0.14 + TEXTO CLARO do mesmo hue. Aqui as
   receitas re-apontam pros tokens de feedback do dark (--success-bg/
   --success etc.), que já são translúcidos e recalibrados por
   superfície. Os DOTS seguem os primitives vivos (bright, herdados),
   legíveis sobre o fill. Consome só semântico (02) — conserta React
   E Alpine de uma vez, zero mudança de HTML/TSX.
   Contraste: fg claro sobre o fill (≈ n900) validado no rodapé do 02
   e em tools/validar-contraste.py (pares "badge * dark").
   ============================================================ */
[data-surface="dark"] {
  --badge-success-bg: var(--success-bg);   --badge-success-fg: var(--success);
  --badge-info-bg:    var(--info-bg);      --badge-info-fg:    var(--info);
  --badge-warning-bg: var(--warning-bg);   --badge-warning-fg: var(--warning);
  --badge-danger-bg:  var(--danger-bg);    --badge-danger-fg:  var(--danger);
  --badge-neutral-bg: oklch(100% 0 0 / 0.08);  --badge-neutral-fg: var(--text-secondary);
  --badge-muted-bg:   oklch(100% 0 0 / 0.06);  --badge-muted-fg:   var(--text-tertiary);
}

/* ============================================================
   UTILITÁRIOS DA CASA (classe, não token)
   ============================================================ */

/* Números/dinheiro: Inter + tabular figures. Mono SÓ pra ID/código. */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'cv01' 1;
  letter-spacing: 0;
}
.num-display {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'cv01' 1;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  font-variant-ligatures: none;
}
.td-num { text-align: right; font-variant-numeric: tabular-nums slashed-zero; }
.code   { font-family: var(--font-mono); font-feature-settings: 'zero' 1; }

/* Tracking por faixa de tamanho (nunca global) */
.tk-display { letter-spacing: var(--tracking-display); }
.tk-heading { letter-spacing: var(--tracking-heading); }
.tk-snug    { letter-spacing: var(--tracking-snug); }

/* Label uppercase pequeno (stat card, header de grupo) */
.label-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
}

/* Foco visível universal (teclado) — desenhado, nunca o do browser */
:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Flash de template Alpine (gotcha F4) */
[x-cloak] { display: none !important; }

/* Safe areas iOS pra barras fixas */
.barra-acao-fixa { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }

/* Skip link (a11y) */
.skip-link {
  position: absolute; top: -100px; left: var(--space-4);
  background: var(--surface-card); color: var(--text-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  font-weight: var(--weight-semibold); z-index: var(--z-toast);
}
.skip-link:focus-visible { top: var(--space-3); }

/* ============================================================
   prefers-reduced-motion — kill-switch global (D6 / WCAG 2.3.3)
   (as durações-token já zeram em 01; isto pega animação inline)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   FIX AUDIT F3 (2026-07-09) — botão SECONDARY no stage.
   No palco, --surface-card continua BRANCO (cards inline claros)
   mas --text-body vira haze-100 (claro) → secondary ficava branco
   sobre branco (default/focus/disabled/loading ilegíveis) e o
   hover pulava pra ink-950 escuro (inconsistente). Aqui o
   secondary do palco vira botão de superfície clara com fg
   ESCURO fixo: n800/branco = 15.67:1; hover clareia de leve
   (n150) mantendo o mesmo fg (≈12:1).
   ============================================================ */
[data-surface="stage"] {
  --btn-secondary-fg:    var(--neutral-800);
  --btn-secondary-hover: var(--neutral-150);
  /* Outline = mesmo caso do secondary no palco: card CLARO (surface-card
     fica branco no stage), então fg ESCURO fixo + bordas neutras visíveis
     (senão a borda translúcida-branca some no card branco e o texto-body
     do palco, claro, ficaria branco-no-branco). n800/branco = 15.67:1. */
  --btn-outline-fg:           var(--neutral-800);
  --btn-outline-border:       var(--neutral-200);
  --btn-outline-hover-bg:     var(--neutral-150);
  --btn-outline-hover-border: var(--neutral-400);
}