/* fretz — ponte (traste → design system fretz)
   ---------------------------------------------------------------------------
   O `fretz.css` é CÓPIA LITERAL do handoff do Claude Design e não se edita.
   Este arquivo é a única camada de tradução: remapeia os tokens próprios do
   traste (--brand, --surface-*, --font, --radius*) para os valores exatos do
   design, e reescreve as classes próprias (.btn-brand/.btn-soft/.btn-ghost,
   .tr-*) que o handoff não conhece porque não são marcação Bootstrap.

   Regra: TODO valor aqui vem do design (docs/design/2026-08-21/). Onde o design
   não define contraparte, o token do traste fica como está — ver docs/design/DESVIOS.md.
   Carregue DEPOIS de custom.css e fretz.css. */

/* ===========================================================================
   1. Tokens do traste remapeados — tema claro
   =========================================================================== */
:root,
[data-theme="light"] {
  /* marca — âmbar do fretz; texto sobre âmbar é GRAFITE (design: --bs-btn-color) */
  --brand: #E9A13B;
  --brand-strong: #8a5f1c;          /* texto de marca sobre tint (design: .fz-badge-amber) */
  --brand-fg: #1B1C23;              /* design: --fz-graphite */
  --brand-tint: #F5E6C8;            /* design: --fz-badge-amber-bg (claro) */
  --brand-tint-strong: #EFD9A8;     /* passo acima do tint — ver DESVIOS */

  /* sequência/streak: o design usa o mesmo âmbar, sem cor própria */
  --flame: #E9A13B;
  --flame-strong: #D9922F;          /* design: --fz-amber-hover */
  --flame-tint: #F5E6C8;

  /* superfícies — osso sobre canvas quente */
  --bg: #EDECE6;                    /* design: --fz-bone-2 */
  --bg-grad-1: #EDECE6;
  --bg-grad-2: #EDECE6;             /* o design proíbe gradiente: cor chapada */
  --surface: #F8F7F3;               /* design: --fz-bone */
  --surface-2: #EDECE6;             /* design: --fz-bone-2 */
  --surface-3: #E4E2DA;             /* design: --fz-bone-3 */
  --border: rgba(20, 21, 28, 0.12);
  --border-strong: rgba(20, 21, 28, 0.16);

  /* texto */
  --text: #14151C;                  /* design: --fz-ink */
  --text-2: rgba(20, 21, 28, 0.62);
  --muted: rgba(20, 21, 28, 0.62);
  --faint: rgba(20, 21, 28, 0.45);
  --overlay: rgba(15, 16, 22, 0.44);

  /* status definidos pelo design */
  --ok: #47A06A;
  --danger: #C4442A;

  /* tipografia */
  --font: 'Instrument Sans', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, monospace;

  /* raio — design: controles 10, cards 14 */
  --radius: 14px;
  --radius-sm: 10px;

  /* sombra — quase nenhuma, camada única */
  --shadow-card: 0 1px 3px rgba(15, 16, 22, 0.06);
  --shadow-card-hover: 0 6px 24px rgba(15, 16, 22, 0.12);
  --shadow-pop: 0 20px 60px rgba(15, 16, 22, 0.24);
  --shadow-brand: none;             /* o design não usa glow de marca */
}

/* ===========================================================================
   2. Tokens do traste remapeados — tema escuro
   =========================================================================== */
[data-theme="dark"] {
  --brand: #E9A13B;
  --brand-strong: #EFC27A;          /* design: [dark] .fz-badge-amber */
  --brand-fg: #1B1C23;
  --brand-tint: #3A3220;            /* design: --fz-badge-amber-bg (escuro) */
  --brand-tint-strong: #4A4029;

  --flame: #E9A13B;
  --flame-strong: #F0B45E;          /* design: --bs-link-hover-color (escuro) */
  --flame-tint: #3A3220;

  --bg: #1B1C23;                    /* design: --fz-graphite */
  --bg-grad-1: #1B1C23;
  --bg-grad-2: #1B1C23;
  --surface: #24252E;               /* design: --fz-graphite-2 */
  --surface-2: #1B1C23;
  --surface-3: #2E3039;             /* design: --fz-graphite-3 */
  --border: rgba(248, 247, 243, 0.13);
  --border-strong: rgba(248, 247, 243, 0.2);

  --text: #F8F7F3;                  /* design: --fz-bone */
  --text-2: rgba(248, 247, 243, 0.64);
  --muted: rgba(248, 247, 243, 0.64);
  --faint: rgba(248, 247, 243, 0.42);
  --overlay: rgba(0, 0, 0, 0.6);

  --ok: #7CC79A;                    /* design: [dark] .fz-badge-ok */
  --danger: #E08A73;                /* design: [dark] .fz-badge-danger */

  /* no escuro o design troca superfície, não usa sombra */
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-brand: none;
}

/* ===========================================================================
   3. Botões próprios do traste → linguagem fretz
   O handoff só conhece .btn-primary/.btn-secondary/.btn-outline-secondary.
   .btn-brand/.btn-soft/.btn-ghost são do traste e recebem aqui o mesmo
   tratamento que o design dá aos equivalentes Bootstrap.
   =========================================================================== */

/* .btn-brand ≡ .btn-primary do design (âmbar, texto grafite, sem glow) */
.btn-brand {
  background: var(--fz-amber);
  border: 1px solid var(--fz-amber);
  color: var(--fz-graphite);
  box-shadow: none;
  transition: background var(--fz-fast) var(--fz-ease),
              border-color var(--fz-fast) var(--fz-ease);
}
.btn-brand:hover {
  background: var(--fz-amber-hover);
  border-color: var(--fz-amber-hover);
  color: var(--fz-graphite);
  filter: none;
}
.btn-brand:active {
  background: var(--fz-amber-press);
  border-color: var(--fz-amber-press);
  color: var(--fz-graphite);
  transform: none;                  /* design: press não encolhe */
}
.btn-brand:focus-visible { box-shadow: 0 0 0 3px var(--fz-amber-glow); }

/* .btn-soft — ação secundária sobre tint de marca */
.btn-soft {
  background: var(--brand-tint);
  border: 1px solid transparent;
  color: var(--brand-strong);
}
.btn-soft:hover { background: var(--brand-tint-strong); color: var(--brand-strong); }

/* .btn-ghost ≡ .btn-outline-secondary do design */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}
.btn-ghost:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

/* ===========================================================================
   4. Marca — wordmark do design aplicado ao lockup do traste
   =========================================================================== */
.tr-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
}
.tr-brand-word {
  font-family: var(--fz-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 23px;
  /* 1.3, não 1: com line-height 1 a tinta do glifo saía 2px acima e 2px abaixo da caixa
     (gate 2026-09-09) — esta é a regra que VENCE (ponte carrega por último) */
  line-height: 1.3;
  color: var(--bs-emphasis-color);
  text-transform: lowercase;
}

/* ===========================================================================
   5. Navegação — dot inlay âmbar no item ativo (motivo gráfico do design)
   =========================================================================== */
.tr-nav-link {
  font-family: var(--fz-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--bs-tertiary-color);
  text-transform: lowercase;
  position: relative;
}
.tr-nav-link:hover { color: var(--bs-secondary-color); }
.tr-nav-link.active { color: var(--bs-emphasis-color); }
.tr-nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fz-amber);
  transform: translateX(-50%);
}

/* ===========================================================================
   6. Pílulas e chips — mono minúsculo, pill, como o .badge do design
   =========================================================================== */
.tr-pill {
  font-family: var(--fz-mono);
  font-weight: 400;
  font-size: 0.65625rem; /* 10.5px em rem — cresce com a fonte do usuário (gate 2026-09-09, 192 células) */
  text-transform: lowercase;
  border-radius: 999px;
  padding: 4px 9px;
}
.tr-pill.brand { background: var(--brand-tint); color: var(--brand-strong); }
.tr-pill.ok,
.tr-pill.pill-ok { background: #DFF0E4; color: #2e7550; }
.tr-pill.danger,
.tr-pill.pill-danger { background: #F6DFD9; color: #a03a24; }
.tr-pill.warn { background: var(--brand-tint); color: var(--brand-strong); }
[data-theme="dark"] .tr-pill.ok,
[data-theme="dark"] .tr-pill.pill-ok { background: #22352A; color: #7CC79A; }
[data-theme="dark"] .tr-pill.danger,
[data-theme="dark"] .tr-pill.pill-danger { background: #3B2620; color: #E08A73; }
[data-theme="dark"] .tr-pill.warn { background: #3A3220; color: #EFC27A; }

/* .tr-tag — selo sólido de marca: texto grafite sobre âmbar nos dois temas */
.tr-tag { background: var(--fz-amber); color: var(--fz-graphite); }
[data-theme="dark"] .tr-tag { background: var(--fz-amber); color: var(--fz-graphite); }

/* ===========================================================================
   6b. .btn-outline-secondary — devolver o comando ao design

   O traste pinta `color`/`border-color` DIRETO (custom.css §"Botão outline com
   contraste nos dois temas"), e cor direta vence a custom property que o
   handoff usa (--bs-btn-color). Sem isto o botão fica cinza-Bootstrap no meio
   do fretz. Mesma especificidade da regra original, carregada depois.
   =========================================================================== */
.btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.btn-outline-secondary:hover {
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}
[data-theme="dark"] .btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg);
}

/* ===========================================================================
   7. Dado técnico em mono — BPM, contadores, metadados (assinatura do design)
   =========================================================================== */
.tr-stat-num,
.tr-meta-valor,
.tr-faixa-valor,
.tr-sessao-bpm-num {
  font-family: var(--fz-mono);
  letter-spacing: -0.02em;
}

/* BPM gigante do metrônomo — o design o desenha em mono, não em display
   (handoff/telas/metronomo.html: font-family:var(--fz-mono); letter-spacing:-0.02em) */
.tr-met-bpm {
  font-family: var(--fz-mono);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ===========================================================================
   8. Micro-rótulos — o design os quer em mono MINÚSCULO, nunca em caixa alta

   O traste força `text-transform:uppercase` + `letter-spacing:.06em` em três
   rótulos. O design é explícito no sentido oposto (readme §CONTENT: "labels de
   UI em caixa baixa"; handoff: .form-label e .fz-mono com text-transform:lowercase).
   =========================================================================== */
.tr-stat-label,
.tr-faixa-rotulo,
.tr-data-table th {
  font-family: var(--fz-mono);
  /* 10.5px do design em rem: px fixo não cresce com a fonte do usuário (WCAG 1.4.4 —
     gate 2026-09-09, 96 células). 0.65625rem = 10.5px a 16px. */
  font-size: 0.65625rem;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--bs-secondary-color);
}

/* ===========================================================================
   9. Widget de feedback (lib concilio-feedback) → paleta fretz

   Os --cfb-* apontavam para --brand-strong (que no fretz é o marrom de TEXTO
   sobre tint, não uma cor de fundo) e, no escuro, para um indigo #4f46e5
   sobrevivente da paleta antiga — o botão saía roxo. No fretz a ação primária
   é âmbar com texto grafite, exatamente como .btn-primary.
   Contraste do par: 9,4:1 (folga sobre o piso AA de 4,5).
   =========================================================================== */
:root,
[data-theme="light"] {
  --cfb-primaria: var(--fz-amber);
  --cfb-primaria-txt: var(--fz-graphite);
  --cfb-raio: var(--fz-r-ctl);
}
[data-theme="dark"] {
  --cfb-primaria: var(--fz-amber);
  --cfb-primaria-txt: var(--fz-graphite);
  --cfb-raio: var(--fz-r-ctl);
}

/* ===========================================================================
   10. Piso de contraste — os três níveis de texto do design, todos em AA

   MEDIDO no alvo real (tests/design/contraste.py, 16 telas): a transcrição
   literal deixou 65 textos abaixo de 4,5:1. Duas causas distintas:

   (a) ERRO MEU de mapeamento de PAPEL. O `--faint` do traste veste parágrafo
       corrido de 15px; o `--bs-tertiary-color` do design veste metadado
       decorativo de 11px. São papéis diferentes, e eu igualei os dois.
   (b) tons que o design usa para TEXTO e que não alcançam AA sobre osso
       (--bs-link-color #C88424 = 2,89:1 sobre card).

   A correção mantém a ESTRUTURA do design — três níveis de tinta, mesma
   família de cor — e só ajusta a opacidade/tom até cada nível passar no piso.
   Os alvos vêm do próprio design: --ink-2 (.62) no claro, --fg-on-dark-2 (.64)
   no escuro, e #8a5f1c (o texto do badge âmbar) como tom de marca sobre claro.
   Registrado em docs/design/DESVIOS.md §6.
   =========================================================================== */
:root,
[data-theme="light"] {
  /* nível 2 e 3 de tinta — .74 e .62 (o design usa .62 e .45; o .45 dá 2,94:1) */
  --muted: rgba(20, 21, 28, 0.74);          /* 7,53:1 no card · 6,78:1 no sunken */
  --faint: rgba(20, 21, 28, 0.62);          /* 4,97:1 no card · 4,63:1 no sunken */
  --text-2: rgba(20, 21, 28, 0.74);
  --bs-secondary-color: rgba(20, 21, 28, 0.74);
  --bs-tertiary-color: rgba(20, 21, 28, 0.62);
  /* marca como TEXTO sobre claro: o âmbar puro dá 2,04:1 — ilegível */
  --bs-link-color: #8a5f1c;                 /* 5,25:1 no card */
  --bs-link-hover-color: #7a5418;           /* 6,30:1 */
  --bs-link-color-rgb: 138, 95, 28;
  --bs-link-hover-color-rgb: 122, 84, 24;
}
[data-theme="dark"] {
  --muted: rgba(248, 247, 243, 0.78);       /* 10,02:1 no fundo · 8,12:1 no inset */
  --faint: rgba(248, 247, 243, 0.64);       /* 7,16:1 no fundo · 6,02:1 no inset */
  --text-2: rgba(248, 247, 243, 0.78);
  --bs-secondary-color: rgba(248, 247, 243, 0.78);
  --bs-tertiary-color: rgba(248, 247, 243, 0.64);
  /* IMPORTANTE: redefinir aqui também. O bloco claro acima usa `:root`, que casa
     em QUALQUER tema — sem esta linha o #8a5f1c vaza para o escuro e dá 2,71:1.
     No escuro o âmbar do design passa folgado (6,98:1 sobre card). */
  --bs-link-color: var(--fz-amber);
  --bs-link-hover-color: #F0B45E;
  --bs-link-color-rgb: 233, 161, 59;
  --bs-link-hover-color-rgb: 240, 180, 94;
}

/* números de destaque em cor de marca: âmbar puro sobre osso dá 2,04:1.
   No claro usa o tom de texto de marca; no escuro o âmbar já passa. */
.tr-stat-num.brand,
.tr-stat-num.flame { color: #8a5f1c; }
[data-theme="dark"] .tr-stat-num.brand,
[data-theme="dark"] .tr-stat-num.flame { color: var(--fz-amber); }

/* texto de marca sobre tint (pílulas, chips). O item de nav ATIVO fica de fora:
   o design o pinta com tinta cheia (--bs-emphasis-color, §5) e quem marca o
   estado é o dot âmbar, não a cor do texto. */
.tr-pill.brand,
.tr-chip.active { color: #8a5f1c; }
[data-theme="dark"] .tr-pill.brand,
[data-theme="dark"] .tr-chip.active { color: #EFC27A; }

/* link nu: o custom.css tem `a { color: var(--brand) }` (§166), que pinta todo
   link com o âmbar puro — 2,04:1 sobre card, ilegível. O design tem token
   próprio de link (--bs-link-color); é ele que deve mandar. */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
.text-primary { color: var(--bs-link-color) !important; }
[data-theme="dark"] .text-primary { color: var(--fz-amber) !important; }

/* ===========================================================================
   11. Fonte ampliada e marca em tela pequena — achados da matriz de usabilidade

   (a) O handoff escreve tamanhos em PIXEL FIXO (.nav-link 14px, .form-label
       10.5px, .badge 10.5px, .fz-mono 11px, .fz-wordmark 23px). Pixel fixo NÃO
       responde à preferência de fonte do usuário: a matriz mediu x1.00 de
       crescimento a 150% e a 200% (WCAG 1.4.4 exige que cresça). O traste
       trabalhava em rem — a regressão entrou comigo.
       Os valores em rem abaixo rendem EXATAMENTE os mesmos pixels com a raiz
       padrão de 16px, então o gate de fidelidade continua batendo; a diferença
       aparece só quando o usuário amplia, que é o ponto.

   (b) `.tr-brand-word` some em <=420px (custom.css §1084). Isso funcionava
       enquanto havia o ícone de nota ao lado; o design aposentou o ícone, e a
       marca passou a sumir INTEIRA, deixando um <a> clicável de 6x8px — alvo
       fantasma. Em vez de esconder, encolhe.
   =========================================================================== */
.tr-nav-link { font-size: 0.875rem; }        /* 14px */
.tr-brand-word { font-size: 1.4375rem; }     /* 23px */
.form-label { font-size: 0.65625rem; }       /* 10.5px */
.badge { font-size: 0.65625rem; }            /* 10.5px */
.fz-mono, code, kbd { font-size: 0.6875rem; }/* 11px */
.fz-wordmark { font-size: 1.4375rem; }       /* 23px */
h1, .h1 { font-size: 2.125rem; }             /* 34px */
h2, .h2 { font-size: 1.625rem; }             /* 26px */
body { font-size: 0.9375rem; }               /* 15px */
.form-control, .form-select { font-size: 0.875rem; }  /* 14px */
.fz-tab { font-size: 0.78125rem; }           /* 12.5px */

/* a marca encolhe em tela estreita, mas não desaparece */
@media (max-width: 420px) {
  .tr-brand-word { display: inline-flex; font-size: 1.125rem; }
}

/* ===========================================================================
   9. Menu lateral — a navegação sai do topo e vira sidebar fixa à esquerda.
      Só em >=900px; abaixo disso mantém a barra superior mobile já testada.
   =========================================================================== */
@media (min-width: 900px) {
  .tr-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }
  .tr-nav {
    grid-row: 1 / 3;
    grid-column: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px 6px;
    padding: 18px 12px 16px;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .tr-flash { grid-column: 2; }
  .tr-content { grid-column: 2; grid-row: 2; }

  .tr-nav .tr-brand { grid-column: 1; grid-row: 1; padding: 2px 10px 14px; }
  .tr-nav > .tr-btn-compact { grid-row: 1; grid-column: 2; justify-self: end; align-self: start; }

  /* modo compacto (html.nav-compact, alternado pelo botão) */
  html.nav-compact .tr-shell { grid-template-columns: 76px minmax(0, 1fr); }
  html.nav-compact .tr-nav { grid-template-rows: auto auto minmax(0, 1fr) auto auto; padding: 14px 8px 14px; }
  html.nav-compact .tr-brand { grid-column: 1 / -1; justify-content: center; padding: 2px 0 4px; }
  html.nav-compact .tr-brand-word { display: none; }
  html.nav-compact .tr-brand::after { content: "f:"; font-family: var(--fz-display); font-weight: 800; font-size: 22px; letter-spacing: -0.04em; color: var(--bs-emphasis-color); }
  html.nav-compact .tr-nav > .tr-btn-compact { grid-row: 2; grid-column: 1 / -1; justify-self: center; align-self: center; }
  html.nav-compact .tr-nav-links { grid-row: 3; }
  html.nav-compact .tr-nav > .tr-icon-btn:not(.tr-btn-compact) { grid-row: 4; }
  html.nav-compact .tr-nav > .dropdown { grid-row: 5; }
  html.nav-compact .tr-nav-link > span { display: none; }
  html.nav-compact .tr-nav-link { justify-content: center; padding: 9px 0; }
  html.nav-compact .tr-nav-sec { font-size: 0; gap: 0; padding: 10px 4px 2px; }
  html.nav-compact .tr-user-name { display: none; }
  html.nav-compact .tr-nav > .dropdown .tr-user { justify-content: center; padding: 4px; }
  html.nav-compact .tr-user.dropdown-toggle::after { display: none; }
  html.nav-compact .tr-nav > .dropdown .dropdown-menu { width: auto; }
  .tr-nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    align-items: stretch;
    gap: 2px;
    overflow-y: auto;
    min-height: 0;
  }
  /* rótulos voltam em qualquer largura — na vertical sempre cabem */
  .tr-nav-link > span { display: inline; }
  .tr-nav-link {
    width: 100%;
    padding: 9px 10px;
    gap: 10px;
  }
  .tr-nav-link .bi { font-size: 1rem; width: 20px; text-align: center; }
  /* o dot inlay do ativo migra pra borda esquerda (vertical, não underline) */
  .tr-nav-link.active::after {
    left: 1px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
  .tr-nav-spacer { display: none; }
  /* separadores de seção no menu lateral */
  .tr-nav-sec {
    font-family: var(--fz-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--bs-tertiary-color);
    padding: 14px 10px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tr-nav-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .tr-nav > .tr-icon-btn:not(.tr-btn-compact) { grid-row: 3; justify-self: center; }
  .tr-nav > .dropdown { grid-row: 4; grid-column: 1 / -1; margin-top: 6px; }
  .tr-nav > .dropdown .tr-user { width: 100%; justify-content: flex-start; }
  .tr-nav > .dropdown .dropdown-menu { width: calc(232px - 24px); }
}
@media (max-width: 899.98px) {
  .tr-btn-compact { display: none; }
  .tr-nav-sec { display: none; }
}