/*
 * Design System LeanLogs — v1 (2026-08-20)
 *
 * Folha única, "encaixável": qualquer página nova do ll-inteligente (não de
 * cliente — Piano Black e outros projetos de cliente mantêm identidade
 * própria) inclui este arquivo com um único <link> e herda tokens + os
 * componentes base abaixo. Nada aqui depende de HTML/JS específico de uma
 * tela — é só CSS.
 *
 * Fonte da identidade: vault "Identidade Visual — Padrão Único LeanLogs"
 * (98 - modelos docs/propostas/Identidade_Visual_LeanLogs.md), que documenta
 * cores/tipografia REAIS extraídas do logo e de propostas comerciais. Esse
 * documento foi escrito pra peças impressas (propostas em Word/PDF); aqui
 * a mesma identidade é adaptada pra tela, mais "leve" (menos bloco de cor
 * sólida, mais espaço em branco) — pedido explícito do Paulinho (2026-08-20).
 *
 * Semântica de cor do próprio logo, preservada aqui:
 *   azul   = método, estrutura, confiança  → títulos, cabeçalhos, navegação
 *   laranja = ação, ênfase, decisão        → CTA/botão primário, destaque
 *             (nunca fundo dominante — regra do vault: 10-15% da tela, 60-30-10)
 *
 * Contraste: todo par abaixo foi checado (luminância relativa WCAG) nos 4
 * blocos de tema antes de entrar aqui — ver nota de cálculo no fim do
 * arquivo. Segue a regra permanente do projeto: texto ≥3x mais claro/escuro
 * que o fundo; fundo "chapado" com texto fixo ≥4.5:1 (ver memória
 * regra_contraste_cores_ui).
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* --- Neutros e superfícies (claro) --- */
  --ll-paper: #F8F8F8;
  --ll-surface: #FFFFFF;
  --ll-surface-2: #F4F7FB;
  --ll-ink: #1A1A1A;
  --ll-muted: #6B7280;
  --ll-line: rgba(26, 26, 26, 0.12);
  --ll-line-strong: rgba(26, 26, 26, 0.24);

  /* --- Azul: estrutura/confiança (marca) --- */
  --ll-blue: #1B4F9C;
  --ll-blue-deep: #173C72;
  --ll-blue-soft: #E3EBF7;
  --ll-table-head: #1F4C8B;

  /* --- Laranja: ação/ênfase (marca) --- */
  --ll-accent: #E15B2C;
  --ll-accent-ink: #A5401D;   /* calibrada p/ contraste como TEXTO, não é a cor oficial de logo/CTA */
  --ll-accent-soft: #FBE4D9;
  --ll-accent-cta-text: #1A1A1A; /* fixa: branco sobre #E15B2C só dá 3.66:1, abaixo do mínimo do projeto */

  /* --- Status (não fazem parte do padrão de marca — vault não define;
     reaproveitados dos mesmos valores já calibrados/auditados no Piano
     Black após o incidente de contraste de 2026-08-09, ver
     regra_contraste_cores_ui) --- */
  --ll-good: #3F7A4F; --ll-good-ink: #2C5A38; --ll-good-soft: #DCEBDD;
  --ll-warn: #C1652B; --ll-warn-ink: #8A4419; --ll-warn-soft: #F3DFC9;
  --ll-bad: #A63D33;  --ll-bad-ink: #A63D33;  --ll-bad-soft: #F3DAD5;

  --ll-radius: 12px;
  --ll-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 4px 16px rgba(26, 26, 26, 0.05);

  --ll-font-display: "Montserrat", "Segoe UI Semibold", "Segoe UI", -apple-system, sans-serif;
  --ll-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ll-paper: #12161D; --ll-surface: #1A2029; --ll-surface-2: #1F2733;
    --ll-ink: #ECEFF4; --ll-muted: #9AA4B2;
    --ll-line: rgba(236, 239, 244, 0.14); --ll-line-strong: rgba(236, 239, 244, 0.26);

    --ll-blue: #6E9BDE; --ll-blue-deep: #0E2647; --ll-blue-soft: #1E2E45;
    --ll-table-head: #17395E;

    --ll-accent: #F0975C; --ll-accent-ink: #F5B98A; --ll-accent-soft: #3D2717;

    --ll-good: #6BBA7C; --ll-good-ink: #A9E0B5; --ll-good-soft: #223B29;
    --ll-warn: #E0954F; --ll-warn-ink: #FBCB98; --ll-warn-soft: #422C18;
    --ll-bad: #E07267;  --ll-bad-ink: #E07267;  --ll-bad-soft: #402420;
  }
}

:root[data-theme="dark"] {
  --ll-paper: #12161D; --ll-surface: #1A2029; --ll-surface-2: #1F2733;
  --ll-ink: #ECEFF4; --ll-muted: #9AA4B2;
  --ll-line: rgba(236, 239, 244, 0.14); --ll-line-strong: rgba(236, 239, 244, 0.26);

  --ll-blue: #6E9BDE; --ll-blue-deep: #0E2647; --ll-blue-soft: #1E2E45;
  --ll-table-head: #17395E;

  --ll-accent: #F0975C; --ll-accent-ink: #F5B98A; --ll-accent-soft: #3D2717;

  --ll-good: #6BBA7C; --ll-good-ink: #A9E0B5; --ll-good-soft: #223B29;
  --ll-warn: #E0954F; --ll-warn-ink: #FBCB98; --ll-warn-soft: #422C18;
  --ll-bad: #E07267;  --ll-bad-ink: #E07267;  --ll-bad-soft: #402420;
}

:root[data-theme="light"] {
  --ll-paper: #F8F8F8; --ll-surface: #FFFFFF; --ll-surface-2: #F4F7FB;
  --ll-ink: #1A1A1A; --ll-muted: #6B7280;
  --ll-line: rgba(26, 26, 26, 0.12); --ll-line-strong: rgba(26, 26, 26, 0.24);
  --ll-blue: #1B4F9C; --ll-blue-deep: #173C72; --ll-blue-soft: #E3EBF7;
  --ll-table-head: #1F4C8B;
  --ll-accent: #E15B2C; --ll-accent-ink: #A5401D; --ll-accent-soft: #FBE4D9;
  --ll-good: #3F7A4F; --ll-good-ink: #2C5A38; --ll-good-soft: #DCEBDD;
  --ll-warn: #C1652B; --ll-warn-ink: #8A4419; --ll-warn-soft: #F3DFC9;
  --ll-bad: #A63D33;  --ll-bad-ink: #A63D33;  --ll-bad-soft: #F3DAD5;
}

/* === Base === */
.ll-app {
  font-family: var(--ll-font-body);
  background: var(--ll-paper);
  color: var(--ll-ink);
  min-height: 100%;
}
.ll-app h1, .ll-app h2, .ll-app h3, .ll-app h4 {
  font-family: var(--ll-font-display);
  color: var(--ll-blue);
  font-weight: 600;
  margin: 0 0 8px;
}
.ll-app a { color: var(--ll-blue); }

/* === Cabeçalho de marca (logo + linha fina azul, per identidade visual) === */
.ll-brand-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 16px; border-bottom: 1px solid var(--ll-blue);
  margin-bottom: 20px;
}
.ll-brand-head img { height: 32px; width: auto; }
.ll-brand-head .ll-brand-title { font-family: var(--ll-font-display); font-weight: 600; font-size: 1.1rem; color: var(--ll-blue); }

/* === Cards === */
.ll-card {
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow);
  padding: 18px 20px 20px;
}
.ll-card-title {
  font-family: var(--ll-font-display); font-weight: 600; font-size: 1rem;
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ll-line);
  color: var(--ll-blue);
}

/* === Botões === */
.ll-btn {
  font-family: var(--ll-font-body); font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.01em; border-radius: 8px; padding: 10px 16px;
  cursor: pointer; border: 1px solid transparent;
}
/* Fundo laranja "chapado" precisa de texto fixo escuro (não var(--ll-ink),
   que inverte em tema escuro) — branco sobre #E15B2C mede 3.66:1, abaixo
   do mínimo; #1A1A1A mede 4.75:1. Ver nota de cálculo no topo do arquivo. */
.ll-btn-primary { background: var(--ll-accent); color: var(--ll-accent-cta-text); }
.ll-btn-primary:hover { filter: brightness(0.94); }
.ll-btn-ghost { background: transparent; border-color: var(--ll-line-strong); color: var(--ll-accent-ink); }
.ll-btn-ghost:hover { background: var(--ll-accent-soft); }
.ll-btn-secondary { background: var(--ll-blue); color: #FFFFFF; }
.ll-btn-secondary:hover { filter: brightness(1.1); }
.ll-btn-danger { background: transparent; color: var(--ll-bad); border-color: var(--ll-bad); }
.ll-btn-danger:hover { background: var(--ll-bad-soft); }

/* === Badges (fundo -soft + texto -ink, par já calibrado nos dois temas) === */
.ll-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.ll-badge-accent { background: var(--ll-accent-soft); color: var(--ll-accent-ink); }
.ll-badge-blue   { background: var(--ll-blue-soft);   color: var(--ll-blue-deep); }
.ll-badge-good   { background: var(--ll-good-soft);   color: var(--ll-good-ink); }
.ll-badge-warn   { background: var(--ll-warn-soft);   color: var(--ll-warn-ink); }
.ll-badge-bad    { background: var(--ll-bad-soft);    color: var(--ll-bad-ink); }

/* === Tabelas (cabeçalho azul + texto branco, per identidade visual) === */
.ll-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ll-table thead th {
  background: var(--ll-table-head); color: #FFFFFF;
  font-family: var(--ll-font-display); font-weight: 600; text-align: left;
  padding: 10px 12px;
}
.ll-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--ll-line); }
.ll-table tbody tr:nth-child(even) { background: var(--ll-surface-2); }
.ll-table tbody tr.ll-row-highlight { background: var(--ll-accent-soft); font-weight: 700; }

/* === Abas === */
.ll-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ll-line); margin-bottom: 18px; }
.ll-tab {
  font-family: var(--ll-font-body); font-weight: 700; font-size: 0.86rem;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ll-muted); padding: 10px 6px; cursor: pointer; margin-bottom: -1px;
}
.ll-tab.is-active { color: var(--ll-blue); border-bottom-color: var(--ll-accent); }
.ll-tab:hover { color: var(--ll-accent-ink); }

/* === KPI === */
.ll-kpi-card { background: var(--ll-surface); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 14px 16px; }
.ll-kpi-card .ll-kpi-label { font-size: 0.78rem; color: var(--ll-muted); margin-bottom: 4px; }
.ll-kpi-card .ll-kpi-value { font-family: var(--ll-font-display); font-size: 1.35rem; font-weight: 700; color: var(--ll-blue); font-variant-numeric: tabular-nums; }

/* === Campos de formulário === */
.ll-field label { display: block; font-size: 0.82rem; color: var(--ll-muted); margin-bottom: 4px; }
.ll-field input, .ll-field select, .ll-field textarea {
  width: 100%; font-family: var(--ll-font-body); font-size: 0.94rem; color: var(--ll-ink);
  background: var(--ll-surface-2); border: 1px solid var(--ll-line-strong); border-radius: 8px;
  padding: 9px 11px;
}
.ll-field input:focus-visible, .ll-field select:focus-visible, .ll-field textarea:focus-visible {
  outline: 2px solid var(--ll-accent); outline-offset: 1px;
}

/* === Alternador de tema (claro/escuro/sistema) — padrão obrigatório em
   toda interface nova, pedido de Paulinho (2026-08-20). Markup e wiring
   automático em leanlogs-theme-toggle.js, só isso aqui é o visual. === */
.ll-theme-switch {
  display: inline-flex; gap: 4px; background: var(--ll-surface-2);
  border: 1px solid var(--ll-line); border-radius: 8px; padding: 3px;
}
.ll-theme-switch button {
  font-family: var(--ll-font-body); font-size: 0.78rem; font-weight: 700;
  border: none; background: none; color: var(--ll-muted);
  padding: 6px 11px; border-radius: 6px; cursor: pointer;
}
.ll-theme-switch button.is-active { background: var(--ll-surface); color: var(--ll-blue); box-shadow: var(--ll-shadow); }

/* === Toast === */
.ll-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ll-ink); color: var(--ll-paper); padding: 12px 18px;
  border-radius: 8px; font-size: 0.88rem; box-shadow: var(--ll-shadow); z-index: 40;
}
.ll-toast[data-type="error"] { background: var(--ll-bad-soft); color: var(--ll-bad-ink); }
.ll-toast[data-type="success"] { background: var(--ll-good-soft); color: var(--ll-good-ink); }

/*
 * Nota de cálculo de contraste (WCAG, luminância relativa) — calculado em
 * 2026-08-20 antes de fixar os valores acima:
 *   ink #1A1A1A / paper #F8F8F8 ................ 16.39:1
 *   blue #1B4F9C / paper #F8F8F8 (títulos) ...... 7.48:1
 *   branco / table-head #1F4C8B ................. 8.52:1
 *   branco / accent #E15B2C (CTA) ............... 3.66:1  ← reprovado, por isso CTA usa texto fixo escuro
 *   #1A1A1A / accent #E15B2C (CTA, valor usado) . 4.75:1
 *   accent-ink #A5401D / accent-soft #FBE4D9 .... 5.13:1
 *   blue-soft: blue #1B4F9C / #E3EBF7 ........... 6.61:1
 *   [tema escuro] ink #ECEFF4 / paper #12161D ... 15.73:1
 *   [tema escuro] accent #F0975C / paper ........ 8.02:1
 *   [tema escuro] blue #6E9BDE / paper .......... 6.39:1
 * Status (good/warn/bad) reaproveitados sem recálculo dos valores já
 * auditados no Piano Black (mesmo par -soft/-ink, mesma fórmula, ver
 * regra_contraste_cores_ui) — não são cor de marca, só sinalização.
 */