/**
 * TrendApp — Camada de refinamento premium/editorial
 *
 * Estratégia: manter tokens D9Pro (tokens.css) intocados para paridade de
 * handoff, mas aplicar ajustes visuais aqui:
 *
 *   ✂  Fundos cinza chapados → off-white/near-black orgânicos
 *   ✂  Cards com borda universal → hairlines + respiro
 *   ✂  Pills coloridas competindo → escala tonal + dot indicator sutil
 *   ✂  Sombras genéricas → sem sombras, ou sombras extremamente sutis
 *   ✓  Tipografia como protagonista: mais tracking negativo em big-numbers
 *   ✓  Divisores 1px hairline entre linhas (sem card wrap)
 *   ✓  Ícones stroke 1.5 (menos peso)
 *
 * Este arquivo carrega DEPOIS de base.css e sobrescreve seletivamente.
 */

:root {
  /* ─── Refined light ─────────────────────────────────────────────── */
  /* Fundo do app: off-white com toque quente (não cinza puro) */
  --background: oklch(0.99 0.002 90);
  --card: oklch(1 0 0);
  --foreground: oklch(0.15 0.015 260);
  --muted-foreground: oklch(0.5 0.01 255);
  --muted: oklch(0.965 0.003 90);
  --border: oklch(0.92 0.004 255);
  --primary: oklch(0.16 0.01 260);
  --primary-foreground: oklch(0.99 0.002 90);

  /* Accent editorial — teal alinhado à TrendScience, sem gritar */
  --accent-fg: oklch(0.55 0.09 190);

  /* Sombras ultra-sutis (quase invisíveis) */
  --shadow-1: 0 1px 0 oklch(0.15 0.015 260 / 0.04);
  --shadow-2: 0 4px 16px oklch(0.15 0.015 260 / 0.04);
  --shadow-3: 0 12px 32px oklch(0.15 0.015 260 / 0.06);
}

.dark {
  --background: oklch(0.14 0.008 260);          /* near-black quente */
  --card:       oklch(0.18 0.008 260);
  --foreground: oklch(0.98 0.002 90);
  --muted-foreground: oklch(0.68 0.008 255);
  --muted:      oklch(0.20 0.008 260);
  --border:     oklch(1 0 0 / 0.07);
  --primary:    oklch(0.98 0.002 90);
  --primary-foreground: oklch(0.14 0.008 260);
  --accent-fg:  oklch(0.75 0.11 190);
}

/* ─── Root background: sem gradient decorativo ────────────────────── */
#root {
  background: var(--background) !important;
}
.viewport {
  background: var(--background);
  box-shadow: none;
  border: 1px solid var(--border);
}
@media (min-width: 640px) {
  .viewport {
    box-shadow: 0 24px 80px oklch(0.15 0.015 260 / 0.08);
  }
}

/* ─── Cards: reduzir uso; quando existir, sem borda pesada ────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: none;
}
.card.hairline {
  border: none;
  border-radius: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.card.flat {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* ─── Section: mais respiro entre blocos ──────────────────────────── */
.page-body .stack {
  gap: 28px;
  padding: 20px 20px 24px;
}
.section-title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

/* ─── Page header: mais limpo ─────────────────────────────────────── */
.page-header {
  padding: 16px 20px;
  padding-top: calc(16px + var(--safe-top));
  border-bottom-color: transparent !important;
}
.page-header .h-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-header .h-sub {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

/* ─── Bottom nav: mais silencioso, sem blur pesado ────────────────── */
.bottom-nav {
  background: var(--background);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--border);
}
.bottom-nav-item {
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: oklch(from var(--muted-foreground) l c h / 0.75);
}
.bottom-nav-item[data-active="true"] {
  color: var(--foreground);
}
.bottom-nav-item .indicator {
  display: none; /* removido — cor + peso do ícone já indicam ativo */
}

/* ─── Pills: mais discretas, sem cor de fundo saturada ────────────── */
.pill {
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
}
.pill.dot::before {
  width: 5px; height: 5px;
}
/* Farol: dot colorido + texto neutro */
.farol-verde,
.farol-amarelo,
.farol-vermelho {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  padding-left: 6px;
}
.farol-verde::before    { background: oklch(0.65 0.15 155) !important; }
.farol-amarelo::before  { background: oklch(0.75 0.14 75) !important; }
.farol-vermelho::before { background: oklch(0.62 0.20 25) !important; }

/* Status pills: fundo praticamente ausente */
.status-neutral, .status-info, .status-warning, .status-success, .status-danger {
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid transparent;
}
.status-danger { color: oklch(0.55 0.18 25); }
.status-warning { color: oklch(0.55 0.12 70); }
.status-success { color: oklch(0.45 0.11 155); }
.status-info { color: var(--accent-fg); }

/* ─── Buttons: mais premium ───────────────────────────────────────── */
.btn {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-height: 48px;
  padding: 14px 22px;
  transition: opacity 140ms ease, transform 100ms ease;
}
.btn.primary {
  background: var(--foreground);
  color: var(--background);
}
.btn.primary:hover:not(:disabled) {
  background: var(--foreground);
  opacity: 0.9;
}
.btn.secondary {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--muted);
}
.btn.sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12.5px;
}
.btn.link {
  color: var(--foreground);
  text-decoration: none;
  padding: 4px 0;
  min-height: 0;
  border-bottom: 1px solid oklch(from var(--foreground) l c h / 0.3);
  border-radius: 0;
}
.btn.link:hover {
  border-bottom-color: var(--foreground);
}

/* ─── Inputs: fundo transparente, só linha inferior ───────────────── */
.input {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 52px;
  padding: 16px 16px;
  font-size: 15px;
  font-weight: 400;
}
.input:focus {
  border-color: var(--foreground);
  box-shadow: none;
}
.field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

/* ─── Big money: mais editorial ───────────────────────────────────── */
.big-money {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.big-money .prefix {
  font-size: 18px;
  font-weight: 400;
  opacity: 0.5;
  margin-right: 8px;
  letter-spacing: 0;
}
.big-money .decimals {
  font-size: 22px;
  font-weight: 400;
  opacity: 0.5;
}

/* ─── Tabs (segmented): menos peso ────────────────────────────────── */
.tabs {
  background: transparent;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.tabs .tab {
  padding: 12px 8px;
  border-radius: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  position: relative;
}
.tabs .tab[data-active="true"] {
  background: transparent;
  color: var(--foreground);
  box-shadow: none;
}
.tabs .tab[data-active="true"]::after {
  content: '';
  position: absolute;
  left: 20%; right: 20%; bottom: -1px;
  height: 1.5px;
  background: var(--foreground);
  border-radius: 2px;
}

/* ─── Chips (filtros horizontais): mais discretos ─────────────────── */
.chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-foreground);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.chip[data-active="true"] {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

/* ─── Sheet: mais premium ─────────────────────────────────────────── */
.sheet {
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px oklch(0 0 0 / 0.08);
}
.sheet-handle {
  background: var(--border);
  width: 32px;
  height: 3px;
}
.sheet-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

/* ─── Tweaks toggle: mais discreto ────────────────────────────────── */
.tweaks-toggle {
  width: 40px; height: 40px;
  background: var(--foreground);
  color: var(--background);
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.08);
}

/* ─── Icon-btn: mais leve ─────────────────────────────────────────── */
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 999px;
}

/* ─── Eyebrow: mais fino ──────────────────────────────────────────── */
.eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

/* ─── WhatsApp: ficar mais discreto na cor ────────────────────────── */
.wa-btn {
  background: oklch(0.62 0.14 148);
  color: white;
}
.wa-btn:hover:not(:disabled) {
  background: oklch(0.56 0.14 148);
}

/* ─── Skeleton: fundo mais sutil ──────────────────────────────────── */
.skel {
  background: var(--muted);
  animation: sk-pulse 1.8s ease-in-out infinite;
}

/* ─── Utility classes específicos do modo refined ─────────────────── */
.hairline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
.hairline-row:last-child {
  border-bottom: none;
}
.hairline-row:hover {
  background: color-mix(in oklch, var(--foreground) 2%, transparent);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.kpi-editorial {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.kpi-editorial:last-child {
  border-bottom: none;
}
.kpi-editorial-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}
.kpi-editorial-value {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi-editorial-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted-foreground);
}

/* Delta como texto simples, sem chip colorido saturado */
.delta-inline {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.delta-inline.up { color: oklch(0.5 0.12 155); }
.delta-inline.down { color: oklch(0.55 0.16 25); }
.delta-inline.flat { color: var(--muted-foreground); }
.dark .delta-inline.up { color: oklch(0.75 0.14 155); }
.dark .delta-inline.down { color: oklch(0.72 0.18 25); }