/*
 * DESIGN TOKENS — Polishop Dashboard
 * Criado 2026-05-26 (LOTE C do plano de melhorias UX)
 *
 * REGRAS DE USO:
 * 1. SEMPRE use var(--color-*) — nunca cor hardcoded em novos componentes
 * 2. Verde = positivo / Vermelho = crítico / Amarelo = atenção / Cinza = neutro (incluindo 0)
 * 3. Canais: Azul=ECOM, Teal=Lojas, Roxo=Misto, Roxo claro=Engajamento
 * 4. Tipografia: Hero (1 por tela), Primary (3-5 por seção), Secondary (suporte), Context (delta/sub)
 * 5. NUNCA aplique vermelho a "0" só por ser zero. Vermelho = abaixo da expectativa.
 *
 * COMPONENTES PADRÃO:
 *   .kpi-card        — Card de KPI genérico
 *   .kpi-card--hero  — Modifier para KPI Hero (1 por tela)
 *   .badge           — Badge de status (positive, critical, warning, neutral, ecom, loja, engagement)
 *   .screen-question — Header "Esta tela responde:" replicável
 */

:root {
  /* ─── CORES SEMÂNTICAS (uso ÚNICO, não-ambíguo) ─── */

  /* Status / Sentimento */
  --color-positive: #00E676;       /* Verde — meta batida / acima da média / CTR alto */
  --color-positive-bg: rgba(0, 230, 118, 0.1);
  --color-positive-border: rgba(0, 230, 118, 0.3);

  --color-critical: #FF5252;       /* Vermelho — abaixo do esperado / requer atenção crítica */
  --color-critical-bg: rgba(255, 82, 82, 0.1);
  --color-critical-border: rgba(255, 82, 82, 0.3);

  --color-warning: #FFB74D;        /* Amarelo — atenção / monitorar / margem de erro */
  --color-warning-bg: rgba(255, 183, 77, 0.1);
  --color-warning-border: rgba(255, 183, 77, 0.4);

  --color-neutral: #9E9E9E;        /* Cinza — dado neutro ou ausente (NÃO use vermelho pra 0!) */
  --color-neutral-bg: rgba(158, 158, 158, 0.08);

  /* Canais (campanha) */
  --channel-ecom: #2196F3;         /* Azul — E-commerce */
  --channel-ecom-bg: rgba(33, 150, 243, 0.1);

  --channel-loja: #26A69A;         /* Teal — Lojas Físicas */
  --channel-loja-bg: rgba(38, 166, 154, 0.1);

  --channel-misto: #AB47BC;        /* Roxo escuro — Misto (Lojas + ECOM) */

  /* Tipo de ação (objetivo) */
  --type-conversion: var(--color-positive); /* Conversão = positivo */
  --type-engagement: #BA68C8;      /* Roxo claro — Engajamento (sem conversão direta) */

  /* ─── TIPOGRAFIA HIERÁRQUICA ─── */

  /* KPIs */
  --fs-kpi-hero: 52px;              /* 1 por tela, valor mais importante */
  --fs-kpi-primary: 36px;           /* 3-5 por seção (cards principais) */
  --fs-kpi-secondary: 22px;         /* Métricas suporte */
  --fs-kpi-context: 14px;           /* Contexto (sub-label, delta) */
  --fs-kpi-micro: 11px;             /* Tooltips, captions */

  --fw-kpi-hero: 700;
  --fw-kpi-primary: 600;
  --fw-kpi-secondary: 500;
  --fw-kpi-context: 400;

  /* Letter spacing */
  --ls-kpi-label: 0.08em;          /* Labels CAPS espalhados */

  /* ─── ESPAÇAMENTO (escala 4-8) ─── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ─── BORDAS / RAIOS ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ─── SHADOWS ─── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
}

/* ─── COMPONENTE PADRÃO: Card KPI ─── */

.kpi-card {
  background: var(--color-neutral-bg);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform 0.2s, border-color 0.2s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.1);
}

.kpi-card__label {
  font-size: var(--fs-kpi-micro);
  font-weight: 600;
  letter-spacing: var(--ls-kpi-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}

.kpi-card__value {
  font-size: var(--fs-kpi-primary);
  font-weight: var(--fw-kpi-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
}
.kpi-card--hero .kpi-card__value {
  font-size: var(--fs-kpi-hero);
  font-weight: var(--fw-kpi-hero);
}

.kpi-card__delta {
  font-size: var(--fs-kpi-context);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-card__delta--up { color: var(--color-positive); }
.kpi-card__delta--down { color: var(--color-critical); }
.kpi-card__delta--neutral { color: var(--color-neutral); }

.kpi-card__sub {
  font-size: var(--fs-kpi-micro);
  color: var(--color-neutral);
  line-height: 1.4;
}

/* ─── BADGES SEMÂNTICAS ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-kpi-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge--positive { background: var(--color-positive-bg); color: var(--color-positive); border: 1px solid var(--color-positive-border); }
.badge--critical { background: var(--color-critical-bg); color: var(--color-critical); border: 1px solid var(--color-critical-border); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.badge--neutral { background: var(--color-neutral-bg); color: var(--color-neutral); }
.badge--ecom { background: var(--channel-ecom-bg); color: var(--channel-ecom); }
.badge--loja { background: var(--channel-loja-bg); color: var(--channel-loja); }
.badge--engagement { background: rgba(186, 104, 200, 0.15); color: var(--type-engagement); }

/* ─── "Esta tela responde" header ─── */
.screen-question {
  font-size: 14px;
  color: var(--color-neutral);
  line-height: 1.6;
  margin: var(--sp-2) 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.02);
  border-left: 3px solid var(--channel-ecom);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}
.screen-question strong {
  color: rgba(255,255,255,0.85);
  font-style: normal;
  font-weight: 600;
  margin-right: 6px;
}