/* farpa-ds-core · components/logo.css · v1.0 · 2026-05-02
   origem: AI/components/logo.css @ Wave 19 Onda D2 · 2026-05-02 · não-editar-sem-PR
   ==========================================================================
   LOGO SYSTEM canônico · invariante de marca guarda-chuva (ADR 012)
   farpa-mark.svg parametrizado · 5 modificadores de contexto · 6 tamanhos.

   Wave 19 Onda D2 (Nicole · 2026-05-02 · Nível 3):
   - 5 modificadores de contexto nomeados (--on-paper · --on-dark · --on-accent · --on-image · --on-hc)
   - Wordmark "farpa" reservado ao hero da home · header/footer/favicon/OG só marca
   - Sistema permite ao autor da página escolher classe de contexto, não CSS var

   Depende de: ds/core/tokens.css + ds/tokens-produto.css (para --text-1 · --accent · --bg).
*/

/* ============================================================
   TOKENS INTERNOS DO MARK — parametrizados por DS
   Default: --on-paper (fundo claro · papel)
   ============================================================ */
:root {
  /* stroke = text-1 garante contraste WCAG AA com --bg em qualquer tema
     accent fica para pop decorativo no centro */
  --mark-stroke:      var(--text-1);
  --mark-fill-tint:   transparent;
  --mark-center-fill: var(--accent);
}

/* HC override · ambos aliases (theme-engine.js legado usa "alto-contraste" · DS V2 usa "hc") */
[data-theme="hc"],
[data-theme="alto-contraste"] {
  --mark-stroke:      var(--text-1);     /* branco em HC contra preto */
  --mark-fill-tint:   transparent;
  --mark-center-fill: var(--accent);     /* laranja central */
}

/* ============================================================
   5 MODIFICADORES DE CONTEXTO (Wave 19 Onda D2 · Nicole)
   Aplicar como classe na <svg class="farpa-mark farpa-mark--on-X">
   ============================================================ */

/* Default já é --on-paper · documentado para clareza */
.farpa-mark--on-paper {
  --mark-stroke:      var(--text-1);
  --mark-fill-tint:   transparent;
  --mark-center-fill: var(--accent);
}

/* Sobre fundo escuro · dark mode · seções premium */
.farpa-mark--on-dark {
  --mark-stroke:      #fafaf9;
  --mark-fill-tint:   transparent;
  --mark-center-fill: var(--accent, #FF6B1A);
}

/* Sobre fundo na cor accent · hero pop · banner CTA */
.farpa-mark--on-accent {
  --mark-stroke:      #fafaf9;
  --mark-fill-tint:   rgba(255, 255, 255, 0.12);
  --mark-center-fill: #fafaf9;
}

/* Sobre fotografia · textura · gradient overlay obrigatório */
.farpa-mark--on-image {
  --mark-stroke:      #fafaf9;
  --mark-fill-tint:   rgba(0, 0, 0, 0.35);
  --mark-center-fill: #fafaf9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Tema alto contraste U2 · drop-shadow para focus visual */
.farpa-mark--on-hc,
[data-theme="hc"] .farpa-mark,
[data-theme="alto-contraste"] .farpa-mark {
  --mark-stroke:      var(--text-1);
  --mark-fill-tint:   transparent;
  --mark-center-fill: var(--accent);
}

[data-theme="hc"] .farpa-mark,
[data-theme="alto-contraste"] .farpa-mark {
  filter: drop-shadow(0 0 1px var(--accent));
}

/* ============================================================
   TAMANHOS CANÔNICOS — 6 variantes (Wave 19 Onda D2)
   Aplicar no container .site-logo__mark OU diretamente no .farpa-mark
   ============================================================ */
.farpa-mark--xs   { width: 16px;  height: 16px;  }   /* favicon baked */
.farpa-mark--sm   { width: 24px;  height: 24px;  }   /* footer · loading */
.farpa-mark--md   { width: 32px;  height: 32px;  }   /* header sticky (default) */
.farpa-mark--lg   { width: 48px;  height: 48px;  }   /* 404 · empty state */
.farpa-mark--hero {
  width: clamp(96px, 14vw, 128px);
  height: clamp(96px, 14vw, 128px);
}                                                     /* hero da home (único) */

/* ============================================================
   SITE LOGO — wrapper com mark + opcional wordmark
   ============================================================ */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}

.site-logo:hover {
  text-decoration: none;
  opacity: 0.88;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Mark — farpa-mark.svg octagonal parametrizado · SEM container quadrado */
.site-logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--logo-mark-size);
  height: var(--logo-mark-size);
  flex-shrink: 0;
}

/* SVG mark — dimensionado pelo container; herda variáveis CSS */
.site-logo__mark .farpa-mark {
  width: 100%;
  height: 100%;
  display: block;
}

/* HC: focus ring explícito em vez de outline no container */
[data-theme="hc"] .site-logo__mark .farpa-mark {
  filter: drop-shadow(0 0 1px var(--accent));
}

/* ============================================================
   WORDMARK — exibido APENAS no hero da home (regra Nicole D2)
   ============================================================ */
.site-logo__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-logo__name {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: var(--fs-md);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text-1);
  line-height: 1;
}

.site-logo__sublabel {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-3);
  opacity: 0.6;
  line-height: 1.4;
  margin-top: 1px;
}

[data-theme="hc"] .site-logo__sublabel {
  opacity: 0.9;
  color: var(--text-3);
}

/* Tamanho footer — menor */
.site-logo--sm {
  --logo-mark-size: 24px;
}

.site-logo--sm .site-logo__name {
  font-size: var(--fs-sm);
}

.site-logo--sm .site-logo__sublabel {
  font-size: 10px;
}