/* ==========================================================================
   Design System LeafProton — Tokens canônicos
   Espelho de docs/design-system/folha-tokens.css (§3 escala/cor, §4 raio e
   altura, §9 camadas). A spec declara os blocos em .fapp[data-theme] e
   .v-theme--folha*; aqui o tema vem do <html data-theme>, que também alcança o
   conteúdo teleportado do Vuetify (menu, diálogo, toast vivem fora da raiz).
   NUNCA use valor cru de cor — sempre var(--token).
   ========================================================================== */

/* Escala — independente de tema, por isso fora dos blocos claro/escuro. */
:root {
  /* Raio (§4): quatro passos. Nada entre eles — 9, 10, 11, 13, 14 e 18 saíram. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Altura de controle (§4) */
  --h-sm: 30px;
  --h-md: 36px;
  --h-lg: 44px;

  /* Sombra da marca (§4) — não muda por tema, ao contrário de --sh1|2|3 */
  --sh-brand: 0 5px 14px -7px rgba(16, 185, 129, .55);
  --sh-brand-lg: 0 12px 30px -16px rgba(16, 185, 129, .45);

  /* Movimento (§4 e §10). Sair é mais rápido que entrar: entrada em --t com
     --ease-out (desacelera ao chegar), saída em --t-fast com --ease-in (acelera
     ao sair). O --ease continua sendo o das trocas de estado, que não montam
     nem desmontam nada. O --t-slow é do scrim de modal e da troca de tema. */
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 240ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .4);

  /* Camadas (§9) */
  --z-nav: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-popover: 50;
  --z-modal: 60;
  --z-toast: 70;
  /* Tour guiado: acima da casca do Vuetify (900–906), abaixo dos overlays dele (2000+). */
  --z-tour: 1500;

  /* Distância da faixa de cookies ao pé da tela. Quem tem rodapé fixo próprio
     sobe a faixa redefinindo no :root dele (front-respond). */
  --cookie-notice-bottom: 16px;

  /* Traço de ícone (§5.6) */
  --icon-stroke: 1.75;

  /* Tinta sobre o fundo que o dono do formulário escolheu (aparência do link
     público). Preto e branco puros, iguais nos dois temas: só eles garantem
     4,5:1 sobre qualquer cor; quem escolhe entre os dois é o inkFor (color.ts). */
  --text-on-light-bg: #000000;
  --text-on-dark-bg: #ffffff;
}

:root {
  /* Superfícies e estruturais (claro) */
  --canvas: #eef1ee;
  --panel: #ffffff;
  --inset: #f1f4f1;
  --inset-hi: #f7fcf9;
  --grid: #f0f2f0;
  --border: #e6eae6;
  --border2: #e3e6e3;
  /* Contorno de campo (§5.3/§5.3.1): mais escuro que --border de propósito.
     A §11 exige ≥3:1 para contorno de controle e --border sobre --panel dá 1,2:1.
     Medido: #8b9790 sobre --panel (#ffffff) = 3,03:1. */
  --field: #8b9790;
  --field-hover: #6f7d75;
  --scroll: #d3dad4;
  --scrollh: #bcc4bd;
  --dots: #d2dbd5;
  --rowhover: #f7faf8;

  /* Elevação (§4) — três degraus, mais suaves no claro que no escuro */
  --sh1: 0 1px 2px rgba(20, 30, 24, .05);
  --sh2: 0 8px 20px -12px rgba(16, 30, 20, .18);
  --sh3: 0 20px 40px -20px rgba(16, 30, 20, .22);

  /* Texto (claro) */
  --text: #1a201c;
  --text2: #363b37;
  --text3: #5c635d;
  --muted: #8a918b;
  --ph: #b6bcb7;
  --dashed: #c5d3c9;
  --hover: #bfe9d3;
  /* Superfície escura de chip flutuante sobre conteúdo claro (DS §5.4): é a
     mesma do "filtro ativo". O texto do chip é branco — 15,8:1 aqui. */
  --chip-dark: #1a201c;

  /* Tints por categoria (claro) */
  --green-tint: #ecfdf5;
  --tint-blue: #eff6ff;
  --tint-purple: #faf5ff;
  --tint-amber: #fff7ed;
  --tint-amber2: #fef3c7;
  --tint-red: #fee2e2;
  --tint-teal: #ecfdf5;

  /* Texto de estado (claro)
     Medido sobre --panel (#ffffff), que é onde este texto de fato aparece:
     verde 5,48:1 · âmbar 5,02:1 · vermelho 4,83:1 — todos ≥ 4,5:1 (§11).
     O verde era #059669 (3,77:1, REPROVAVA AA) e escureceu para #047857. Só o
     valor mudou; o nome do token não. É também o verde do item de menu ativo
     (DS §7): o --brand-nav que ocupava esse papel era fixo do tema claro e
     media 2,8:1 sobre o --green-tint escuro, então deixou de existir. */
  --green-text: #047857;
  --amber-text: #b45309;
  --red-text: #dc2626;

  /* Código (claro) */
  --code: #f5f8f5;
  --star: #f59e0b;
  /* Superfícies de cartão de destaque e tints de bloco de nota. A spec declara
     os seis em folha-tokens.css sem documentar consumidor; entram no espelho
     para que o valor exista quando a tela que os usa chegar. */
  --card1: #0f1c16;
  --card2: #16352a;
  --nb-blue: #dbe8fb;
  --nb-purple: #ecdcfa;
  --nb-green: #c4ecd6;

  /* Apelidos aposentados (§3.1): --faint, --faint2 e --icf eram indistinguíveis
     entre si e --icf reprovava o mínimo de 3:1 para ícone de interface. Viram
     var(--muted) e ficam vivos só para não quebrar tela antiga — código novo usa
     a escala válida --text → --text2 → --text3 → --muted. */
  --faint: var(--muted);
  --faint2: var(--muted);
  --icf: var(--muted);

}

/* Marca, tipografia e cor de família — invariantes ao tema (§3.2, §3.3, §13.2). */
:root {
  /* Pilha mono (§2), antes repetida crua em listing.css, auth.css e base.css. */
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Verde da marca (§3.2) — o mesmo nos dois temas: o escuro ganha identidade
     pelo canvas navy, não por um verde diferente. */
  --brand-green: #10b981;
  --brand-green-hover: #0ea271;
  --brand-green-deep: #059669;
  --brand-green-light: #34d399;
  /* Navy e órbita do símbolo (§13.2); a névoa é o canvas claro da marca. */
  --brand-navy: #13263f;
  --brand-orbit: #22406b;
  --brand-mist: #eef1ee;
  /* Texto/ícone sobre a marca: existe para que o `#fff` do botão primário tenha
     nome — a regra do topo deste arquivo vale para ele também. */
  --on-brand: #ffffff;
  --brand-grad: linear-gradient(140deg, #34d399, #059669);
  /* Apelidos históricos, escritos pelas telas desde antes desta versão. São o
     MESMO valor, não um segundo verde (spec §3.2). */
  --brand: var(--brand-green);
  --brand-hover: var(--brand-green-hover);
  --brand-emphasis: var(--brand-green-deep);

  --sel: #bbf7d0;
  --overlay: rgba(10, 16, 12, .55);

  /* Cor de família (§3.3): o sólido de cada uma é o traço do ícone; o tint
     correspondente é por tema (--tint-*, abaixo). */
  --c-green: #10b981;
  --c-blue: #3b82f6;
  --c-purple: #a855f7;
  --c-amber: #f59e0b;
  --c-red: #f43f5e;
  --c-teal: #0d9488;
}

:root[data-theme="dark"] {
  /* Superfícies e estruturais (escuro — navy tecnológico, DS §3.1).
     O escuro deixou de ser um cinza neutro invertido do claro e passou a um
     azul-marinho profundo, com as superfícies na mesma família azul-esverdeada:
     é o que dá identidade própria ao tema e combina com os glows verde-esmeralda
     do fundo ambiente (base.css). */
  --canvas: #0b1b23;
  --panel: #0f2028;
  --inset: #122530;
  --inset-hi: #14282f;
  --grid: #16303a;
  --border: #1b3038;
  --border2: #1d3a40;
  /* Contorno de campo no escuro (§3.1/§5.3): medido 3,19:1 sobre --panel e
     3,36:1 sobre --canvas, acima dos 3:1 da §11. */
  --field: #4e7370;
  --field-hover: #5a8079;
  --scroll: #1b3038;
  --scrollh: #24444c;
  --dots: #16303a;
  --rowhover: #16262a;

  /* Elevação (§4) — mais fundas que no claro, para vencer o canvas navy */
  --sh1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh2: 0 10px 24px -14px rgba(0, 0, 0, .55);
  --sh3: 0 24px 50px -20px rgba(0, 0, 0, .65);

  /* Texto (escuro) */
  --text: #eaf3ef;
  --text2: #cfe3dc;
  --text3: #8fada4;
  --muted: #6b8a82;
  --ph: #4a6660;
  --dashed: #2a4a44;
  --hover: #2dd4bf;
  /* No escuro o chip flutuante SOBE do painel em vez de escurecer (§3.1): é o
     degrau elevado da própria paleta, o mesmo de --scrollh. Branco sobre ele
     mede 10,47:1. */
  --chip-dark: #24444c;

  /* Tints por categoria (escuro) */
  --green-tint: #122a24;
  --tint-blue: #10222e;
  --tint-purple: #1c1830;
  --tint-amber: #2e2410;
  --tint-amber2: #332a10;
  --tint-red: #301418;
  --tint-teal: #0f2a28;

  /* Texto de estado (escuro)
     Medido sobre o --panel novo: verde 8,69:1 · âmbar 10,0:1 · vermelho 6,04:1. */
  --green-text: #34d399;
  --amber-text: #fbbf24;
  --red-text: #f87171;

  /* Código (escuro) */
  --code: #14282f;
  --star: #fbbf24;
  --card1: #0d2a22;
  --card2: #123a2e;
  --nb-blue: #142a40;
  --nb-purple: #241c36;
  --nb-green: #123a2c;

  /* Apelidos aposentados (§3.1) — ver a nota no bloco claro. */
  --faint: var(--muted);
  --faint2: var(--muted);
  --icf: var(--muted);
}

/* ==========================================================================
   Design System LeafProton — Marca (§13)
   Espelho da parte de marca de docs/design-system/folha-tokens.css.

   O símbolo NUNCA é redesenhado em tela (§13.7): aponte um <img> para
   @akito/ui-kit/assets/brand/leafproton-icone-*.svg dentro de .flogo__mark.
   Par claro/escuro: ponha as duas imagens e deixe o CSS escolher.

   A spec escreve o gatilho de tema como `.fapp[data-theme="dark"]`, que é dos
   protótipos HTML. Aqui valem os dois mecanismos reais: `:root[data-theme]`,
   que o app põe no <html> e por isso alcança conteúdo teleportado, e
   `.v-theme--folhaDark`, que o Vuetify põe na própria raiz.

   Cores de marca (--brand-green*, --brand-navy, --brand-orbit, --brand-mist)
   moram em tokens.css, com o resto dos tokens.
   ========================================================================== */

/* ── Lockup (§13.4) ─────────────────────────────────────────────────────── */
.flogo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}

.flogo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  width: 28px;
  height: 28px;
}

.flogo__mark > svg,
.flogo__mark > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Par de arquivos: o claro é o padrão, o escuro só aparece no tema escuro. */
.flogo__mark > .flogo__img--dark {
  display: none;
}

:root[data-theme="dark"] .flogo__mark > .flogo__img--light,
.v-theme--folhaDark .flogo__mark > .flogo__img--light {
  display: none;
}

:root[data-theme="dark"] .flogo__mark > .flogo__img--dark,
.v-theme--folhaDark .flogo__mark > .flogo__img--dark {
  display: block;
}

/* ── Wordmark (§13.2): duas cores, sem espaço entre Leaf e Proton ───────── */
.flogo__word {
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  font-size: 19px;
}

.flogo__leaf {
  color: var(--brand-green-deep);
}

.flogo__proton {
  color: var(--brand-navy);
}

:root[data-theme="dark"] .flogo__leaf,
.v-theme--folhaDark .flogo__leaf {
  color: var(--brand-green-light);
}

:root[data-theme="dark"] .flogo__proton,
.v-theme--folhaDark .flogo__proton {
  color: var(--on-brand);
}

/* ── Escalas (§13.5) — sm: cromo do app · md (padrão): cabeçalhos ·
   lg/xl: login, e-mail, marketing. Wordmark nunca abaixo de 15px. ───────── */
.flogo--sm {
  gap: 9px;
}

.flogo--sm .flogo__mark {
  width: 22px;
  height: 22px;
}

.flogo--sm .flogo__word {
  font-size: 15px;
}

.flogo--lg {
  gap: 13px;
}

.flogo--lg .flogo__mark {
  width: 40px;
  height: 40px;
}

.flogo--lg .flogo__word {
  font-size: 27px;
}

.flogo--xl {
  gap: 16px;
}

.flogo--xl .flogo__mark {
  width: 64px;
  height: 64px;
}

.flogo--xl .flogo__word {
  font-size: 40px;
}

/* ── Ladrilho — símbolo em superfície própria (cromo do app, app icon) ──── */
.flogo--tile .flogo__mark {
  box-sizing: content-box;
  padding: 5px;
  border-radius: var(--r-sm);
  background: #eef7f1;
  border: 1px solid #dbe9e0;
}

:root[data-theme="dark"] .flogo--tile .flogo__mark,
.v-theme--folhaDark .flogo--tile .flogo__mark {
  background: rgba(52, 211, 153, .10);
  border-color: rgba(52, 211, 153, .22);
}

.flogo--tile.flogo--lg .flogo__mark {
  padding: 9px;
  border-radius: var(--r-md);
}

.flogo--tile.flogo--xl .flogo__mark {
  padding: 13px;
  border-radius: var(--r-lg);
}

/* ── Vertical (login, formulário público, e-mail) ───────────────────────── */
.flogo--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ── Tema fixo (§13.6) — login, e-mail e página de erro fora do app ───────
   A ilha não segue o tema do produto, e o lockup precisa parar de segui-lo
   junto: o componente entrega uma imagem só, e estas classes prendem a
   wordmark. Repetidas no seletor pelo mesmo motivo do `--mono` abaixo: a regra
   de tema pesa (0,3,0) e uma classe sozinha perderia para ela. */
.flogo.flogo--on-light .flogo__leaf {
  color: var(--brand-green-deep);
}

.flogo.flogo--on-light .flogo__proton {
  color: var(--brand-navy);
}

.flogo.flogo--on-dark .flogo__leaf {
  color: var(--brand-green-light);
}

.flogo.flogo--on-dark .flogo__proton {
  color: var(--on-brand);
}

/* ── Monocromático: a wordmark herda a cor do contexto (sólido ou foto) ───
   A classe se repete no seletor de propósito. A regra de tema escuro acima pesa
   (0,3,0) e um `.flogo--mono` só pesa (0,2,0): sem a repetição o tema vence e o
   lockup mono sai com "Leaf" verde sobre navy — o que a §13.7 proíbe. Com os
   pesos empatados, decide a ordem, e esta regra vem depois. */
.flogo.flogo--mono .flogo__leaf,
.flogo.flogo--mono .flogo__proton {
  color: currentColor;
}

/* ── Pílula de conta (§7) — disparo do menu de usuário ──────────────────── */
.account-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--panel);
  cursor: pointer;
  transition: background var(--t) var(--ease);
}

.account-pill:hover {
  background: var(--inset);
}

.account-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Teal, não o verde da marca: --brand-grad é #34d399→#059669 e este é
     #5eead4→#0d9488. A spec usa o teal aqui de propósito, para o avatar não
     competir com a ação primária da barra. */
  background: linear-gradient(140deg, #5eead4, #0d9488);
  color: var(--on-brand);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-pill-chevron {
  color: var(--muted);
  font-size: 12px;
}

/* ==========================================================================
   Design System Folha — Botões (DS §5.1)

   Arquivo próprio, e não um bloco dentro do listing.css, porque o botão é a
   ÚNICA peça do DS que os três fronts precisam sem precisar da casca de
   listagem: o `front-respond` não importa `listing.css`, e foi exatamente por
   isso que a `respond-ui` acabou com uma cópia byte a byte destas regras. Uma
   cópia começa idêntica e deriva na primeira correção feita de um lado só.

   `listing.css` e `auth.css` fazem `@import` daqui, então quem já importava um
   dos dois não muda nada.
   ========================================================================== */

/* --- Botões (DS §5.1) --------------------------------------------------- */

/* Base: layout e tipografia. Não pinta nada — sozinha ela cai no botão default
   do browser, então SEMPRE acompanhada de um modificador. O `AppButton` existe
   justamente para essa escolha não ficar com quem escreve a tela. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Altura única --h-md (36px), que é também o alvo de toque de desktop da §11
     — a v1 pedia 40px porque a §11 de então media o alvo por outro critério. */
  min-height: var(--h-md);
  padding: 0 14px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

/* Largura total — o "Criar novo" da sidebar (DS §6). */
.lp-btn-block {
  width: 100%;
}

.lp-btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  box-shadow: var(--sh-brand);
}

.lp-btn-primary:hover:not(:disabled) {
  background: var(--brand-hover);
}

.lp-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.lp-btn-ghost {
  background: var(--panel);
  color: var(--text2);
  border: 1px solid var(--border2);
}

.lp-btn-ghost:hover:not(:disabled) {
  background: var(--inset);
  color: var(--text);
}

/* A §5.1 define o estado desabilitado só para o primário; sem estas duas
   regras, secundário e ícone travados ficavam visualmente iguais aos ativos. */
.lp-btn-ghost:disabled,
.lp-btn-danger:disabled,
.lp-btn-add:disabled,
.lp-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Destrutivo COM rótulo (DS §5.1): texto vermelho, fundo só no hover. */
.lp-btn-danger {
  background: transparent;
  color: var(--c-red);
  border: none;
}

.lp-btn-danger:hover:not(:disabled) {
  background: var(--tint-red);
}

/* Destrutivo de MODAL de confirmação (DS §5.8): aí sim fundo sólido — é a ação
   à direita de um diálogo que já avisou o que se perde. */
.lp-btn-danger.is-solid {
  background: var(--c-red);
  color: var(--on-brand);
}

.lp-btn-danger.is-solid:hover:not(:disabled) {
  background: var(--c-red);
  opacity: 0.88;
}

/* Atenção (DS §5.8): a ação que tem risco mas não apaga nada — testar em
   produção, desligar uma verificação. Âmbar em texto; sólido no modal. */
.lp-btn-warning {
  background: transparent;
  color: var(--amber-text);
  border: none;
}

.lp-btn-warning:hover:not(:disabled) {
  background: var(--tint-amber);
}

.lp-btn-warning.is-solid {
  background: var(--c-amber);
  color: var(--on-brand);
}

.lp-btn-warning.is-solid:hover:not(:disabled) {
  background: var(--c-amber);
  opacity: 0.88;
}

/* "Adicionar" tracejado (DS §5.1). Estava na spec desde o começo e nunca teve
   classe: cada lista reimplementou a sua — o "+" do canvas de fluxo chegou a
   ter o CSS copiado em dez arquivos. */
.lp-btn-add {
  background: transparent;
  color: var(--brand);
  border: 2px dashed var(--dashed);
}

.lp-btn-add:hover:not(:disabled) {
  background: var(--inset-hi);
  border-color: var(--brand);
}

/* Botão de ícone quadrado (§5.1): 36×36, raio --r-sm — a mesma altura do botão
   de texto, que é o alvo de desktop da §11. */
.lp-icon-btn {
  width: var(--h-md);
  height: var(--h-md);
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lp-icon-btn:hover:not(:disabled) {
  background: var(--inset);
  color: var(--text);
}

.lp-icon-btn.is-danger:hover:not(:disabled) {
  background: var(--tint-red);
  color: var(--c-red);
}

/* Dentro da linha da tabela o ALVO continua --h-md — encolhê-lo reprovaria a
   §11, que foi o que o antigo `is-sm` de 28px fazia. O que muda é só o tom,
   mais apagado para não competir com o conteúdo da linha. */
.lp-icon-btn.is-sm {
  color: var(--muted);
  font-size: 12px;
}

/* Dentro de <td> o `display:flex` empilha os botões (docs/06-frontend.md). */
td .lp-icon-btn {
  display: inline-flex;
}

/* --- Envio das telas de acesso (§5.1, variante de largura total) ------ */
.lp-submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  border-radius: var(--r-md);
  padding: 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  /* --sh-brand-lg é o degrau alto da sombra de marca; a escala não tem um
     segundo degrau para o hover, então lá muda só o deslocamento. */
  box-shadow: var(--sh-brand-lg);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
    opacity var(--t) var(--ease);
}

.lp-submit:hover:not(:disabled) {
  transform: translateY(-2px);
}

.lp-submit:active:not(:disabled) { transform: translateY(0); }
.lp-submit:disabled { cursor: not-allowed; opacity: 0.55; }

.lp-submit-label { display: flex; align-items: center; gap: 7px; }

/* Mesmo primário, em forma de link. O `.lp-submit` já é flex e centrado: o que
   sobra do <a> é a sublinha. Estava copiado por tela (InviteAccept,
   ResetPassword) — a margem, que varia por contexto, continua sendo de lá. */
.lp-submit-link { text-decoration: none; }