/* haruo-ds — tokens
 * ============================================================================
 * A identidade da casa, em CSS custom properties e nada mais. Sem build, sem
 * dependência, sem framework: um `<link>` e as variáveis existem.
 *
 * POR QUE ASSIM. Os três front-ends renderizam HTML de jeitos incompatíveis —
 * componente Astro (haruo.dev), arquivo estático servido pelo Fastify
 * (tamperlens), e string montada em Python (`painel.py` do agentservice).
 * Compartilhar CÓDIGO de componente entre eles exigiria Web Components, ou
 * seja, JS de terceiro numa página que hoje é zero-JS. Variável CSS atravessa
 * os três sem exigir nada de nenhum.
 *
 * DE ONDE VEIO. Colhido do `src/web/styles.css` do Tamperlens (658 variáveis,
 * claro e escuro), que é o único dos três com sistema de verdade: UM matiz de
 * marca que funciona nos dois temas (teal #0f766e / #2dd4bf), fundo off-white
 * quente em vez de branco puro, e escala de severidade já pensada. O que era
 * daquele produto e não da casa ficou de fora (ver o fim do arquivo).
 *
 * NOMENCLATURA. Os nomes canônicos são os do Tailwind v4 (`--color-*`,
 * `--font-*`, `--radius-*`, `--text-*`), porque assim o MESMO arquivo serve
 * como tema do Tailwind (`theme.css`) e como folha de variáveis para quem não
 * usa Tailwind. No fim há ALIASES curtos (`--bg`, `--text`, `--accent`) para o
 * CSS que o Tamperlens já tem escrito — 4.685 linhas que continuam funcionando
 * sem uma edição.
 *
 * TEMA. Claro é o padrão em `:root`. Escuro entra por `prefers-color-scheme`
 * (a menos que o usuário tenha escolhido claro) E por `[data-theme="dark"]`,
 * para o botão de tema vencer nas duas direções. Nenhuma cor tem sua ÚNICA
 * definição dentro de um bloco de tema.
 */

:root {
  /* `color-scheme` NÃO é enfeite: é o que faz o navegador desenhar barra de
   * rolagem, campo de formulário e menu nativo no tema certo. Sem ele, uma
   * página escura ganha barra de rolagem clara. Fica no sistema porque é
   * contrato de tema, e todo consumidor precisa — a migração do Tamperlens
   * descobriu isso perdendo a declaração pelo caminho. */
  color-scheme: light;

  /* ── superfícies ────────────────────────────────────────────────────────
   * `--color-bg` NÃO é branco puro, e isso é a decisão que mais faz o
   * conjunto parecer considerado em vez de padrão. #faf9f6 é papel. */
  --color-bg: #faf9f6;
  --color-bg-raised: #ffffff;   /* card, menu, modal: sobe acima do papel */
  --color-bg-inset: #f5f3ee;    /* campo, poço, linha zebrada: afunda */
  --color-bg-code: #f2f0ea;

  --color-border: #e5e2db;
  --color-border-strong: #d3cfc4;
  /* DESVIO DELIBERADO do Tamperlens (#94907f → #8f8b7a, cinco pontos mais
   * escuro). Motivo medido, não gosto: sobre `--color-bg-inset` o original dá
   * **2,89:1**, abaixo do 3:1 que a WCAG 1.4.11 exige para o limite de um
   * controle — e campo dentro de painel afundado é caso comum, não exótico.
   * Com #8f8b7a passa nas três superfícies claras (papel 3,25 · afundado 3,08
   * · elevado 3,42). Ver `scripts/contraste.mjs`. */
  --color-control-edge: #8f8b7a;

  /* ── texto ─────────────────────────────────────────────────────────────
   * Quatro níveis, não dois. `article` é levemente mais claro que `text`
   * porque parágrafo longo em preto cheio cansa; `faint` é o piso — abaixo
   * dele não passa em contraste. */
  --color-text: #1c2321;
  --color-text-article: #333b37;
  --color-text-muted: #5a625e;
  --color-text-faint: #656d68;
  --color-text-code: #24302d;

  /* ── marca ─────────────────────────────────────────────────────────────
   * UM matiz. A tentação de ter quatro acentos é o que separa paleta de
   * sistema — e o que fazia o haruo.dev parecer landing de 2021. */
  --color-accent: #0f766e;
  --color-accent-strong: #0b5d57;   /* hover/active */
  --color-on-accent: #ffffff;       /* texto SOBRE o acento */
  --color-accent-wash: rgba(15, 118, 110, 0.06);   /* fundo de seleção, linha ativa */
  --color-accent-glow: rgba(15, 118, 110, 0.055);  /* halo de foco */

  /* ── estado ────────────────────────────────────────────────────────────
   * Generalizado da escala de severidade do Tamperlens (low/elevated/high).
   * Cada estado tem cor, fundo e texto próprios — usar a cor pura como fundo
   * dá contraste ruim, e é o erro mais comum em badge de status.
   * REGRA: cor nunca é o único portador do significado. Sempre acompanha
   * palavra ou ícone. */
  --color-ok: #15803d;
  --color-ok-bg: #edf6f0;
  --color-ok-border: rgba(21, 128, 61, 0.32);
  --color-ok-text: #14532d;

  --color-warn: #b45309;
  --color-warn-bg: #fbf3ea;
  --color-warn-border: rgba(180, 83, 9, 0.3);
  --color-warn-text: #7c3d08;

  --color-danger: #b91c1c;
  --color-danger-bg: #fbeeeb;
  --color-danger-border: rgba(185, 28, 28, 0.3);
  --color-danger-text: #7f1d1d;

  --color-info: #5a625e;
  --color-info-bg: #f1f1ec;
  --color-info-border: rgba(90, 98, 94, 0.28);
  --color-info-text: #333b37;

  /* ── tipografia ────────────────────────────────────────────────────────
   * `--font-sans` é a pilha do SISTEMA, de propósito: zero requisição, zero
   * layout shift, e é a cara que o Tamperlens já tem. `--font-display` existe
   * para o site institucional poder carregar uma fonte de marca SEM que o
   * produto pague por ela — é o "mesma voz, volume diferente". Por padrão as
   * duas são a mesma coisa. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Roboto Mono", Consolas, Menlo, monospace;

  /* escala de 1.2 (terça menor) a partir de 16px — discreta o bastante para
   * texto denso de produto, e o `--text-4xl` cobre o hero do site */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --leading-tight: 1.2;    /* títulos */
  --leading-normal: 1.5;   /* interface */
  --leading-relaxed: 1.65; /* parágrafo longo */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ── espaço ────────────────────────────────────────────────────────────
   * Base 4px. Escala curta de propósito: sistema com 14 degraus vira sistema
   * em que ninguém sabe qual usar. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── forma ─────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius: 10px;            /* o padrão do Tamperlens; é o raio da casa */
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 35, 33, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 35, 33, 0.08);
  --shadow-menu: 0 8px 24px var(--color-menu-shadow);
  --color-menu-shadow: rgba(28, 35, 33, 0.14);

  /* ── movimento ─────────────────────────────────────────────────────────
   * Curto. Interface que demora é interface que parece lenta, não elegante.
   * Quem quiser expressão usa `--dur-slow` e olhe lá. */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── layout ────────────────────────────────────────────────────────────── */
  --width-prose: 68ch;   /* linha de leitura; acima disso o olho se perde na volta */
  --width-page: 1160px;

  /* ── aliases curtos ────────────────────────────────────────────────────
   * O CSS que o Tamperlens já tem escrito usa `--bg`, `--text`, `--accent`:
   * 4.685 linhas que continuam funcionando sem uma edição.
   *
   * FICAM NO MESMO BLOCO que os canônicos, e não num `:root` separado depois.
   * Quem lê CSS sem motor de cascata — as suítes do Tamperlens, ferramenta de
   * design — pega o PRIMEIRO bloco de cada seletor e para ali; alias num segundo
   * bloco é invisível para todos eles.
   *
   * VALOR LITERAL, e não `var(--color-…)`: `var()` só o navegador resolve. A
   * duplicação é verificada por `scripts/aliases.mjs`. */
  --bg: #faf9f6;
  --bg-raised: #ffffff;
  --bg-inset: #f5f3ee;
  --bg-code: #f2f0ea;
  --border: #e5e2db;
  --border-strong: #d3cfc4;
  --control-edge: #8f8b7a;
  --text: #1c2321;
  --text-article: #333b37;
  --text-muted: #5a625e;
  --text-faint: #656d68;
  --text-code: #24302d;
  --accent: #0f766e;
  --accent-strong: #0b5d57;
  --on-accent: #ffffff;
  --accent-wash: rgba(15, 118, 110, 0.06);
  --accent-glow: rgba(15, 118, 110, 0.055);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Roboto Mono", Consolas, Menlo, monospace;
  --menu-shadow: rgba(28, 35, 33, 0.14);
  --low: #15803d;
  --low-bg: #edf6f0;
  --low-border: rgba(21, 128, 61, 0.32);
  --low-text: #14532d;
  --elevated: #b45309;
  --elevated-bg: #fbf3ea;
  --high: #b91c1c;
  --high-bg: #fbeeeb;
  --high-border: rgba(185, 28, 28, 0.3);
  --high-text: #7f1d1d;
  --info: #5a625e;
  --info-bg: #f1f1ec;
}

/* ── tema escuro ─────────────────────────────────────────────────────────
 * O escuro NÃO é o claro invertido: o fundo puxa para o verde do acento
 * (#151a18, não #000) e o acento clareia (teal-400) porque teal-700 sobre
 * escuro não tem contraste. Mesmo matiz, papel trocado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #151a18;
    --color-bg-raised: #1c2320;
    --color-bg-inset: #121816;
    --color-bg-code: #18312d;

    --color-border: #2a332f;
    --color-border-strong: #3a443f;
    --color-control-edge: #66756d;

    --color-text: #e8eae8;
    --color-text-article: #d3d8d5;
    --color-text-muted: #9aa5a0;
    --color-text-faint: #96a09b;
    --color-text-code: #dce6e3;

    --color-accent: #2dd4bf;
    --color-accent-strong: #5eead4;
    --color-on-accent: #08211f;
    --color-accent-wash: rgba(45, 212, 191, 0.1);
    --color-accent-glow: rgba(45, 212, 191, 0.07);

    --color-ok: #4ade80;
    --color-ok-bg: rgba(74, 222, 128, 0.14);
    --color-ok-border: rgba(74, 222, 128, 0.36);
    --color-ok-text: #86efac;

    --color-warn: #fbbf24;
    --color-warn-bg: rgba(251, 191, 36, 0.14);
    --color-warn-border: rgba(251, 191, 36, 0.36);
    --color-warn-text: #fcd34d;

    --color-danger: #f87171;
    --color-danger-bg: rgba(248, 113, 113, 0.14);
    --color-danger-border: rgba(248, 113, 113, 0.38);
    --color-danger-text: #fca5a5;

    --color-info: #9aa5a0;
    --color-info-bg: rgba(154, 165, 160, 0.14);
    --color-info-border: rgba(154, 165, 160, 0.3);
    --color-info-text: #d3d8d5;

    --color-menu-shadow: rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  
    /* ── aliases curtos ────────────────────────────────────────────────────
     * O CSS que o Tamperlens já tem escrito usa `--bg`, `--text`, `--accent`:
     * 4.685 linhas que continuam funcionando sem uma edição.
     *
     * FICAM NO MESMO BLOCO que os canônicos, e não num `:root` separado depois.
     * Quem lê CSS sem motor de cascata — as suítes do Tamperlens, ferramenta de
     * design — pega o PRIMEIRO bloco de cada seletor e para ali; alias num segundo
     * bloco é invisível para todos eles.
     *
     * VALOR LITERAL, e não `var(--color-…)`: `var()` só o navegador resolve. A
     * duplicação é verificada por `scripts/aliases.mjs`. */
    --bg: #151a18;
    --bg-raised: #1c2320;
    --bg-inset: #121816;
    --bg-code: #18312d;
    --border: #2a332f;
    --border-strong: #3a443f;
    --control-edge: #66756d;
    --text: #e8eae8;
    --text-article: #d3d8d5;
    --text-muted: #9aa5a0;
    --text-faint: #96a09b;
    --text-code: #dce6e3;
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --on-accent: #08211f;
    --accent-wash: rgba(45, 212, 191, 0.1);
    --accent-glow: rgba(45, 212, 191, 0.07);
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Roboto Mono", Consolas, Menlo, monospace;
    --menu-shadow: rgba(0, 0, 0, 0.5);
    --low: #4ade80;
    --low-bg: rgba(74, 222, 128, 0.14);
    --low-border: rgba(74, 222, 128, 0.36);
    --low-text: #86efac;
    --elevated: #fbbf24;
    --elevated-bg: rgba(251, 191, 36, 0.14);
    --high: #f87171;
    --high-bg: rgba(248, 113, 113, 0.14);
    --high-border: rgba(248, 113, 113, 0.38);
    --high-text: #fca5a5;
    --info: #9aa5a0;
    --info-bg: rgba(154, 165, 160, 0.14);
}
}

/* o botão de tema vence nas duas direções — por isso o bloco se repete */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #151a18;
  --color-bg-raised: #1c2320;
  --color-bg-inset: #121816;
  --color-bg-code: #18312d;
  --color-border: #2a332f;
  --color-border-strong: #3a443f;
  --color-control-edge: #66756d;
  --color-text: #e8eae8;
  --color-text-article: #d3d8d5;
  --color-text-muted: #9aa5a0;
  --color-text-faint: #96a09b;
  --color-text-code: #dce6e3;
  --color-accent: #2dd4bf;
  --color-accent-strong: #5eead4;
  --color-on-accent: #08211f;
  --color-accent-wash: rgba(45, 212, 191, 0.1);
  --color-accent-glow: rgba(45, 212, 191, 0.07);
  --color-ok: #4ade80;
  --color-ok-bg: rgba(74, 222, 128, 0.14);
  --color-ok-border: rgba(74, 222, 128, 0.36);
  --color-ok-text: #86efac;
  --color-warn: #fbbf24;
  --color-warn-bg: rgba(251, 191, 36, 0.14);
  --color-warn-border: rgba(251, 191, 36, 0.36);
  --color-warn-text: #fcd34d;
  --color-danger: #f87171;
  --color-danger-bg: rgba(248, 113, 113, 0.14);
  --color-danger-border: rgba(248, 113, 113, 0.38);
  --color-danger-text: #fca5a5;
  --color-info: #9aa5a0;
  --color-info-bg: rgba(154, 165, 160, 0.14);
  --color-info-border: rgba(154, 165, 160, 0.3);
  --color-info-text: #d3d8d5;
  --color-menu-shadow: rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);

  /* ── aliases curtos ────────────────────────────────────────────────────
   * O CSS que o Tamperlens já tem escrito usa `--bg`, `--text`, `--accent`:
   * 4.685 linhas que continuam funcionando sem uma edição.
   *
   * FICAM NO MESMO BLOCO que os canônicos, e não num `:root` separado depois.
   * Quem lê CSS sem motor de cascata — as suítes do Tamperlens, ferramenta de
   * design — pega o PRIMEIRO bloco de cada seletor e para ali; alias num segundo
   * bloco é invisível para todos eles.
   *
   * VALOR LITERAL, e não `var(--color-…)`: `var()` só o navegador resolve. A
   * duplicação é verificada por `scripts/aliases.mjs`. */
  --bg: #151a18;
  --bg-raised: #1c2320;
  --bg-inset: #121816;
  --bg-code: #18312d;
  --border: #2a332f;
  --border-strong: #3a443f;
  --control-edge: #66756d;
  --text: #e8eae8;
  --text-article: #d3d8d5;
  --text-muted: #9aa5a0;
  --text-faint: #96a09b;
  --text-code: #dce6e3;
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --on-accent: #08211f;
  --accent-wash: rgba(45, 212, 191, 0.1);
  --accent-glow: rgba(45, 212, 191, 0.07);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Roboto Mono", Consolas, Menlo, monospace;
  --menu-shadow: rgba(0, 0, 0, 0.5);
  --low: #4ade80;
  --low-bg: rgba(74, 222, 128, 0.14);
  --low-border: rgba(74, 222, 128, 0.36);
  --low-text: #86efac;
  --elevated: #fbbf24;
  --elevated-bg: rgba(251, 191, 36, 0.14);
  --high: #f87171;
  --high-bg: rgba(248, 113, 113, 0.14);
  --high-border: rgba(248, 113, 113, 0.38);
  --high-text: #fca5a5;
  --info: #9aa5a0;
  --info-bg: rgba(154, 165, 160, 0.14);
}

/* ── o que NÃO entrou, e por quê ─────────────────────────────────────────
 * `--redaction-bar` / `--redaction-bar-edge`  → é a tarja de redação do
 *     Tamperlens. Conceito de um produto, não da casa.
 * `--ph-badge-light` / `--ph-badge-dark`      → liga/desliga o selo do
 *     Product Hunt. Isso é campanha, não sistema.
 * Um token que só um produto usa mora no CSS daquele produto. Sistema que
 * aceita tudo deixa de ser sistema. */