/**
 * O sistema de design do Kortilink — ver DESIGN.md na raiz do repo.
 *
 * Carrega-se DEPOIS do <style> de cada página: redefine as variáveis que as
 * páginas já usam, nas duas famílias de nomes que o site tem (`--bg`, `--text`,
 * `--purple`… e `--fundo`, `--texto`, `--violeta`…). Assim a cor muda em todo o
 * lado sem reescrever o CSS de 50 páginas — e muda nos dois temas.
 *
 * O tema segue o aparelho (`prefers-color-scheme`) — decisão do Wander,
 * 2026-10-01. Um `data-theme` no <html> manda por cima: é o interruptor.
 *
 * NÃO SE CARREGA NAS BIO PAGES. Essas são do criador, com o tema que ele quis.
 */

/* ─── Tokens: claro ──────────────────────────────────────────────────────── */
:root {
  --k-bg: #ffffff;
  --k-fundo-2: #fafafa;
  --k-painel: #ffffff;
  --k-painel-2: #f5f5f5;
  --k-linha: #e5e5e5;
  --k-linha-forte: #d4d4d4;
  --k-tinta: #171717;
  --k-texto: #404040;
  --k-fraco: #737373;
  --k-acao: #6d28d9;
  --k-acao-forte: #5b21b6;
  --k-acao-texto: #6d28d9;
  --k-acao-suave: #f3efff;
  --k-sobre-acao: #ffffff;
  --k-pro: #7a5c16;
  --k-pro-fundo: #f7f0dc;
  --k-ok: #15803d;
  --k-erro: #dc2626;
  --k-aviso: #b45309;
  --k-sombra-1: 0 1px 2px rgb(0 0 0 / .05);
  --k-sombra-2: 0 8px 24px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);
  --k-letra: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --k-entrar: cubic-bezier(0.23, 1, 0.32, 1);
  --k-mudar: cubic-bezier(0.4, 0, 0.2, 1);
  /* Ícones de lista como máscara: cor = background, nunca um glifo de texto. */
  --k-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --k-ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ─── Tokens: escuro (o aparelho pede, ou o interruptor manda) ───────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-bg: #0a0a0a;
    --k-fundo-2: #111111;
    --k-painel: #141414;
    --k-painel-2: #1c1c1c;
    --k-linha: #262626;
    --k-linha-forte: #333333;
    --k-tinta: #ededed;
    --k-texto: #d4d4d4;
    --k-fraco: #a1a1a1;
    --k-acao: #7c3aed;
    --k-acao-forte: #6d28d9;
    --k-acao-texto: #a78bfa;
    --k-acao-suave: #1d1530;
    --k-pro: #d4b25a;
    --k-pro-fundo: #241d0c;
    --k-ok: #4ade80;
    --k-erro: #f87171;
    --k-aviso: #fbbf24;
    --k-sombra-1: 0 0 0 0 transparent;
    --k-sombra-2: 0 8px 24px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --k-bg: #0a0a0a;
  --k-fundo-2: #111111;
  --k-painel: #141414;
  --k-painel-2: #1c1c1c;
  --k-linha: #262626;
  --k-linha-forte: #333333;
  --k-tinta: #ededed;
  --k-texto: #d4d4d4;
  --k-fraco: #a1a1a1;
  --k-acao: #7c3aed;
  --k-acao-forte: #6d28d9;
  --k-acao-texto: #a78bfa;
  --k-acao-suave: #1d1530;
  --k-pro: #d4b25a;
  --k-pro-fundo: #241d0c;
  --k-ok: #4ade80;
  --k-erro: #f87171;
  --k-aviso: #fbbf24;
  --k-sombra-1: 0 0 0 0 transparent;
  --k-sombra-2: 0 8px 24px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* ─── As variáveis que as páginas já usam, apontadas para os tokens ─────────
 * `:root:root` para ganhar a qualquer `:root` ou `[data-theme]` da página,
 * venha antes ou depois. */
:root:root {
  /* fundos */
  --bg: var(--k-bg);
  --bg2: var(--k-fundo-2);
  --bg3: var(--k-painel-2);
  --bg-app: var(--k-bg);
  --dark: var(--k-bg);
  --fundo: var(--k-bg);
  --tinta: var(--k-bg);
  --card: var(--k-painel);
  --card2: var(--k-painel-2);
  --panel: var(--k-painel);
  --panel2: var(--k-painel-2);
  --painel: var(--k-painel);
  --painel2: var(--k-painel-2);
  --white: var(--k-painel);
  --dark2: var(--k-painel);
  --dark3: var(--k-painel-2);
  --surface: var(--k-painel);

  /* texto */
  --text: var(--k-tinta);
  --texto: var(--k-tinta);
  --text-muted: var(--k-fraco);
  --muted: var(--k-fraco);
  --muted2: var(--k-fraco);
  --fraco: var(--k-fraco);
  --soft: var(--k-texto);

  /* linhas */
  --border: var(--k-linha);
  --linha: var(--k-linha);
  --line: var(--k-linha);
  --gold-border: var(--k-linha);
  --border-gold: var(--k-linha);

  /* a única cor de acção */
  --purple: var(--k-acao);
  --purple2: var(--k-acao-forte);
  --purple-light: var(--k-acao-texto);
  --violeta: var(--k-acao);
  --accent: var(--k-acao);
  --accent2: var(--k-acao);
  --acento: var(--k-acao);
  --blue: var(--k-acao);
  --blue-dark: var(--k-acao-forte);
  --blue-light: var(--k-acao-suave);
  --purple-dim: var(--k-acao-suave);
  --roxo: var(--k-acao);

  /* O dourado era a cor de destaque genérica das páginas (links, item activo,
     «Cria uma grátis →»). No sistema o destaque é o violeta; o dourado só
     aparece onde se escreve `--k-pro` de propósito — o selo e o cartão Pro. */
  --gold: var(--k-acao-texto);
  --gold2: var(--k-acao-texto);
  --gold-light: var(--k-acao-texto);
  --ouro: var(--k-acao-texto);
  --acento2: var(--k-acao-texto);
  --gold-bg: var(--k-acao-suave);
  --gold-dim: var(--k-acao-suave);

  /* estados */
  --green: var(--k-ok);
  --ok: var(--k-ok);
  --sim: var(--k-ok);
  --red: var(--k-erro);
  --err: var(--k-erro);
  --vermelho: var(--k-erro);
  --orange: var(--k-aviso);
  --warn: var(--k-aviso);
  --error: var(--k-erro);
  --medido: var(--k-ok);

  /* As do editor da bio page (biopage-manager.html). As --phone-* ficam: são o
     telemóvel de pré-visualização, um aparelho escuro em qualquer tema. */
  --bg-app: var(--k-bg);
  --bg-app-2: var(--k-fundo-2);
  --sb: var(--k-painel);
  --sb2: var(--k-painel-2);
  --sb-border: var(--k-linha);
  --purple-bg: var(--k-acao-suave);
  --center-bg: var(--k-fundo-2);
  --center-bg2: var(--k-painel-2);
  --center-card: var(--k-painel);
  --center-border: var(--k-linha);
  --center-border-soft: var(--k-linha);
  --dark-text: var(--k-tinta);
  --mid-text: var(--k-texto);
  --muted-text: var(--k-fraco);
  --soft-text: var(--k-fraco);
  --input-bg: var(--k-painel);
  --input-border: var(--k-linha-forte);
  --input-focus: var(--k-acao);
  --shadow-card: var(--k-sombra-1);
  --shadow-elev: var(--k-sombra-2);

  /* sombras: nada de halos de cor */
  --shadow: var(--k-sombra-1);
  --shadow-lg: var(--k-sombra-2);
  --shadow-gold: none;
  --shadow-purple: none;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--k-bg);
  color: var(--k-texto);
  font-family: var(--k-letra);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--k-tinta); font-family: var(--k-letra); }
h1, h2 { font-weight: 600; letter-spacing: -0.02em; }
h3 { font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--k-acao-texto); text-underline-offset: 3px; }

/* As superfícies que ninguém desenha — e que dizem se a página foi feita ou montada. */
::selection { background: var(--k-acao-suave); color: var(--k-tinta); }
input, textarea { caret-color: var(--k-acao); }
:focus-visible { outline: 2px solid var(--k-acao); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--k-linha-forte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--k-linha-forte); border-radius: 10px; border: 3px solid var(--k-bg); }
::-webkit-scrollbar-track { background: transparent; }
::placeholder { color: var(--k-fraco); opacity: 1; }
/* Os controlos nativos também levam a cor do sistema, não o azul do browser. */
input[type="range"], input[type="checkbox"], input[type="radio"], progress { accent-color: var(--k-acao); }

/* Números de tabela alinhados. */
table, .stat-val, .stat-num, [class*="stat-value"], [class*="-num"] { font-variant-numeric: tabular-nums; }

/* O logótipo plano é sempre tinta (#171717) e inverte-se quando a página está
   escura. Não leva media query dentro do SVG: o Chrome faz um SVG em <img>
   seguir o tema da PÁGINA, o Firefox o do aparelho — e as duas regras juntas
   anulavam-se (medido a 2026-10-01: logo branco em fundo branco). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img[src$="marca-plana.svg"] { filter: invert(.93); }
}
:root[data-theme="dark"] img[src$="marca-plana.svg"] { filter: invert(.93); }

/* ─── A barra das páginas públicas (.pnav) ───────────────────────────────
   Uma só, partilhada: preços, blog, sobre, contacto e as legais tinham cada
   uma a sua cópia inline, com o logótipo e o item activo em dourado fixo. */
.pnav { flex-wrap: nowrap !important; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 4vw, 48px); height: 64px; background: var(--k-bg); background: color-mix(in srgb, var(--k-bg) 90%, transparent); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--k-linha); }
.pnav-marca { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; color: var(--k-tinta); text-decoration: none; letter-spacing: -0.02em; }
.pnav-marca img { height: 1.75em; width: auto; }
.pnav-links { display: flex; gap: 24px; }
.pnav-links a { color: var(--k-fraco); text-decoration: none; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.pnav-links a:hover, .pnav-links a[aria-current="page"] { color: var(--k-tinta); }
.pnav-acoes { display: flex; gap: 8px; }
.pnav-acoes a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pnav-entrar { color: var(--k-tinta); border: 1px solid var(--k-linha-forte); }
.pnav-entrar:hover { background: var(--k-painel-2); }
.pnav-criar { color: #fff; background: var(--k-acao); font-weight: 600; }
.pnav-criar:hover { background: var(--k-acao-forte); }
@media (max-width: 720px) { .pnav-links { display: none; } }
@media (max-width: 520px) { .pnav-acoes .pnav-entrar { display: none; } }

/* A categoria dos artigos do blog (.cat-badge): 46 cópias do mesmo molde, cada
   uma com a sua cor. Neutra em todas — o `!important` ganha às cores escritas
   em linha em alguns artigos. */
.cat-badge, .article-cat { background: var(--k-painel-2) !important; color: var(--k-texto) !important; border: 1px solid var(--k-linha) !important; }

/* O índice das páginas legais: o texto de cada item já traz o número
   («1. Aceitação…»), e a lista numerava outra vez — «1. 1. Aceitação». */
ol.toc { list-style: none; padding-left: 0; }

/* «Saltar para o conteúdo» (posto pelo cookie-consent.js). O estilo vivia só no
   movel.css, que os artigos do blog não carregam — o link aparecia cru no topo
   de todos eles (2026-10-02). */
.kl-saltar { position: absolute; left: 8px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 8px;
  background: var(--k-tinta); color: var(--k-bg); font-weight: 600; text-decoration: none; }
.kl-saltar:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}