/* ============================================================================
 * Espaço Casa Design System (ECDS) — Tokens
 * ----------------------------------------------------------------------------
 * Story 4.1 / EPIC-004 — atualizado na reconciliação tipográfica com Manual EY
 *
 * Fonte de verdade única para cores, tipografia, espaçamento, raios e sombras
 * do produto. Todos os componentes ECDS e refactors visuais consomem essas
 * variáveis via `var(--ec-*)`. Nada hardcoded.
 *
 * Regra tipográfica (reconciliada com `docs/ey-manual-identidade-visual.md`):
 *   - App interno (`layout.html`): DM Sans solo. Densidade operacional.
 *   - Portal público (`layout_publico.html`, body `.ec-public-body`):
 *     serifa clássica (EB Garamond) restrita a `h1`, `h2` e `.ec-display`.
 *     O resto (h3, h4, corpo, labels) segue em DM Sans, conforme o manual.
 *   - A serifa é o "rosto" da marca e só aparece onde o cliente final
 *     enxerga. O app do operador permanece sans-serif solo.
 *
 * Referências:
 *   docs/ey-manual-identidade-visual.md  (manual normativo — seção 3)
 *   _bmad-output/planning-artifacts/ux-design-specification.md
 * ========================================================================= */

:root {
  /* ─── Brand ─────────────────────────────────────────────────────────── */
  --ec-yellow: #FFE600;     /* CTA primário, dot de badge "ação" — máx 10-15% */
  --ec-black:  #1A1A1A;     /* Texto principal, fundo escuro */

  /* ─── Neutros (escala EY) ───────────────────────────────────────────── */
  --ec-white:    #FFFFFF;   /* Fundo principal */
  --ec-gray-50:  #F5F4F0;   /* Fundo secundário, linhas alternadas */
  --ec-gray-100: #E8E6E0;   /* Bordas, divisores */
  --ec-gray-400: #9B9890;   /* Labels, metadados decorativos (NÃO texto essencial) */
  --ec-gray-600: #5C5A55;   /* Ícones, metadata, texto terciário essencial */
  --ec-gray-800: #2E2B27;   /* Fundo alternativo escuro */

  /* ─── Estados semânticos (extensão sóbria do manual EY) ─────────────── */
  --ec-state-pending:  var(--ec-gray-400);  /* Aguardando ação */
  --ec-state-progress: var(--ec-yellow);    /* Em andamento (único uso de amarelo em estado) */
  --ec-state-success:  var(--ec-black);     /* Sucesso = ausência de alarme */
  --ec-state-error:    #8B0000;             /* Bordô sóbrio, jamais vermelho saturado */
  --ec-state-warning:  var(--ec-gray-800);  /* Aviso discreto */

  /* ─── Tipografia ────────────────────────────────────────────────────── */
  --ec-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ec-font-display: var(--ec-font-sans); /* default sans — app interno */
  /* Serifa de marca (Manual EY, seção 3) — usada apenas no portal público
     via escopo `body.ec-public-body`. Georgia é o fallback do próprio manual. */
  --ec-font-display-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --ec-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Espaçamento (base 8pt) ────────────────────────────────────────── */
  --ec-space-0:  0;
  --ec-space-1:  4px;     /* xs — gap ícone+label */
  --ec-space-2:  8px;     /* sm — gap entre elementos inline */
  --ec-space-3:  12px;    /* gap entre controles de form */
  --ec-space-4:  16px;    /* md — padding interno de componente */
  --ec-space-6:  24px;    /* lg — gap entre cards */
  --ec-space-8:  32px;    /* padding lateral tablet */
  --ec-space-10: 40px;    /* xl — separação entre seções */
  --ec-space-16: 64px;    /* 2xl — padding hero */
  --ec-space-24: 96px;    /* 3xl — separação entre blocos */
  --ec-space-30: 120px;   /* 4xl — separação máxima hero */

  /* ─── Raios ─────────────────────────────────────────────────────────── */
  --ec-radius-sm:   4px;   /* botões, inputs, badges */
  --ec-radius-md:   8px;   /* cards, offcanvas, modais */
  --ec-radius-lg:   12px;  /* hero cards */
  --ec-radius-pill: 999px; /* pílulas de status */

  /* ─── Sombras ───────────────────────────────────────────────────────── */
  --ec-shadow-none:  none;
  --ec-shadow-sm:    0 1px 2px rgba(26, 26, 26, 0.04);   /* sticky headers */
  --ec-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);     /* hover de card */
  --ec-shadow-modal: 0 12px 40px rgba(26, 26, 26, 0.12); /* modal, offcanvas, popover */
}

/* ============================================================================
 * Reset tipográfico mínimo — garante que a hierarquia se aplica
 * mesmo em telas que ainda não foram refatoradas para classes ECDS.
 * ========================================================================= */
html, body {
  font-family: var(--ec-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ec-black);
  background-color: var(--ec-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cabeçalhos: peso forte + letter-spacing apertado substituem
   a autoridade que viria da serifa. h1 ≈ -0.025em, indo até -0.03em em display. */
h1, .h1 {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.10;
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-family: var(--ec-font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.40;
}

/* Display class — usada por valores monetários grandes, hero do portal etc. */
.ec-display {
  font-family: var(--ec-font-sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Token de número (valores monetários) com tabular-nums sempre ativo */
.ec-numeric {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Label uppercase com tracking largo */
.ec-label {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.20;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-gray-400);
}

/* Metadata — timestamps, ajuda inline */
.ec-meta {
  font-family: var(--ec-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.50;
  color: var(--ec-gray-600);
}

/* Body small */
.ec-body-sm {
  font-size: 13px;
  line-height: 1.55;
}

/* Tabular numerals em tabelas — opt-in via classe */
.ec-tabular {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
 * Foco visível — obrigatório (AC-05).
 * Aplicado a TODOS os elementos focáveis. Nunca usar `outline: none`
 * sem substituto explícito.
 * ========================================================================= */
:focus-visible {
  outline: 2px solid var(--ec-yellow);
  outline-offset: 2px;
}

/* `prefers-reduced-motion` — desliga animações para usuários que pedem */
@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;
  }
}

/* ============================================================================
 * Serifa de marca — escopo restrito ao portal público
 * ----------------------------------------------------------------------------
 * Reconciliação com o Manual EY (docs/ey-manual-identidade-visual.md, seção 3):
 * o manual prescreve EB Garamond para Display/H1/H2 e DM Sans a partir de H3.
 *
 * Para preservar a densidade do app interno (operador) e dar o rosto serifado
 * do EY apenas onde o cliente final enxerga, essas regras são escopadas por
 * `body.ec-public-body` — a classe que o layout_publico.html já carrega.
 *
 * h3, h4, corpo e labels permanecem em DM Sans também no portal público,
 * conforme o próprio manual.
 * ========================================================================= */
body.ec-public-body h1,
body.ec-public-body .h1,
body.ec-public-body .ec-display {
  font-family: var(--ec-font-display-serif);
  font-weight: 500;           /* manual EY: H1 500 */
  letter-spacing: -0.01em;    /* manual EY: -0.01em */
}

body.ec-public-body h2,
body.ec-public-body .h2 {
  font-family: var(--ec-font-display-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* `.ec-display` em contexto público: escala hero (total de pedido, nome da
   loja). Mantém tamanho fluido mas troca o peso/letter-spacing para o perfil
   serifado. */
body.ec-public-body .ec-display {
  font-weight: 500;
  line-height: 1.10;
  letter-spacing: -0.01em;
}