/* DarkTask — tokens
   Uma fonte de verdade para cor, espaço, raio, tipo, camada e movimento.

   Regras deste arquivo:
   - Os nomes antigos (--panel, --line, --muted…) continuam existindo como
     apelidos dos novos. Nenhuma tela quebra; tudo passa a beber da mesma paleta.
   - Superfície tem preenchimento de verdade. O vidro (backdrop-filter) é
     decoração de três lugares só — cabeçalho fixo, faixa e fundo de modal —
     e não substitui contraste.
   - --border é a linha decorativa de cartão; --border-strong é a linha de
     controle (campo, botão, marcador) e cumpre 3:1 contra a superfície.
   - --accent é o preenchimento escolhido pela pessoa; --accent-text é a mesma
     cor corrigida pelo applyTheme até ler com 4,5:1 sobre o fundo do tema.
     Texto e ícone soltos usam --accent-text; botão cheio usa --accent. */

:root {
  /* --- escala de tipo (px) --- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-display: 48px;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  /* Plus Jakarta Sans é a família do novo template (design system 09/2026).
     Inter fica de reserva enquanto a Jakarta não pinta, e o mesmo em telas que
     ainda não foram remodeladas. Auto-hospedada em base.css. */
  --font-ui: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Fundação estrutural do template (09/2026) ---------------------------
     Constantes medidas do design system: o app é feito de bandas horizontais
     de altura fixa, divididas por hairlines, e o conteúdo rolável ganha a
     moldura de 25px para não encostar na barra. Tracking editorial: negativo
     forte em texto grande, positivo largo em rótulos maiúsculos. */
  --banda-topo: 72px;       /* cabeçalho global */
  --banda-pagina: 98px;     /* faixa de título de página */
  --banda-linha: 49px;      /* linha de nav, aba, adicionar, célula de lista */
  --banda-secao: 56px;      /* cabeçalho de seção */
  --moldura: 25px;          /* recuo do conteúdo rolável */
  --vao-cartoes: 25px;      /* respiro entre cartões */
  --celula-x: 20px;         /* recuo horizontal de célula de cabeçalho/lista */
  --celula-acao: 72px;      /* célula quadrada de ação em cabeçalho */
  --celula-icone: 56px;     /* célula do "+" na linha de adicionar */

  --tk-hero: -.6px;         /* títulos e números grandes */
  --tk-tight: -.4px;        /* título de modal e cartão */
  --tk-snug: -.1px;
  --tk-label: .3px;         /* rótulo de botão */
  --tk-eyebrow: 1.8px;      /* sobrancelha MAIÚSCULA */
  --tk-cap: 1.6px;          /* NEWS! / MÍDIA */

  /* --- espaço (grade de 4) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- raio ---
     Canto reto pelo novo template (09/2026): os de canto zeram; o de pílula
     fica para toggle, avatar e o que é genuinamente redondo. Os nomes seguem
     valendo — voltar ao arredondado é devolver os valores. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 999px;

  /* --- camadas --- */
  --z-base: 0;
  --z-sticky: 10;
  --z-dock: 20;
  --z-popover: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tour: 60;
  --z-auth: 70;

  /* --- movimento --- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* --- alvo de toque --- */
  --toque-min: 44px;

  /* --- paleta Escuro (template 09/2026: papel #0d0d0d, tinta #f5f5f5, fio
     #262626, hover #1a1a1a). Vale sem data-dt-theme e é o PADRÃO do app desde
     19/09/2026: quem nunca escolheu tema abre aqui. --- */
  --bg: #0d0d0d;
  --bg-elev: #141414;
  --surface-1: #0d0d0d;
  --surface-2: #1a1a1a;
  --surface-3: #222222;
  /* chapa = o cinza do status em andamento (--dt-chapa do template). Fica
     entre o hover e o active de propósito: é dado, não resposta a ponteiro. */
  --chapa: #1f1f1f;
  --border: #262626;
  /* Um tom de linha só: o forte é apelido do fio. */
  --border-strong: #262626;
  --text: #f5f5f5;
  --text-2: #bdbdbd;
  --text-3: #8c8c8c;
  --cancel: #8c8c8c;
  --danger: #e0806f;
  --danger-text: #e0806f;
  --danger-soft: rgba(224, 128, 111, .12);
  --ok: #f5f5f5;
  --ok-text: #f5f5f5;
  --warn: #bdbdbd;
  --warn-text: #bdbdbd;
  --scrim: rgba(0, 0, 0, .5);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .7);

  /* Acento: applyTheme grava --accent, --accent-2, --accent-weak,
     --accent-text e --on-accent em html/body/raiz. Estes são os valores de
     partida, para a primeira pintura. */
  /* Acento monocromático (template 09/2026): tinta, não cor. No escuro (padrão
     de partida) é quase-branco; o applyTheme grava o valor final por tema. */
  --accent: #f5f5f5;
  --accent-2: #f5f5f5;
  --accent-text: #f5f5f5;
  --accent-weak: rgba(245, 245, 245, .06);
  --accent-soft: var(--accent-weak);
  --on-accent: #0d0d0d;
  --focus-ring: 2px solid var(--accent-text);

  /* --- apelidos dos nomes antigos --- */
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --glass: var(--surface-2);
  --glass-2: var(--surface-3);
  --line: var(--border);
  --line-2: var(--border-strong);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --shadow: var(--shadow-2);
  --dt-surface: var(--surface-1);
  --dt-surface-hover: var(--surface-2);
  --dt-surface-strong: var(--surface-3);
  --dt-field: var(--surface-1);
  --dt-edge: var(--border);
  --dt-edge-strong: var(--border-strong);
  --dt-toque: rgba(245, 245, 245, .06);
  --dt-toque-forte: rgba(245, 245, 245, .10);
}

/* Claro = papel do template (09/2026): superfície #f5f5f5 chapada, tinta
   preta, hairline #dcdcdc, acento neutralizado em preto. */
[data-dt-theme="light"] {
  --bg: #f5f5f5;
  --bg-elev: #ffffff;
  --surface-1: #f5f5f5;
  --surface-2: #ececec;
  --surface-3: #e0e0e0;
  --chapa: #e6e6e6;
  --border: #dcdcdc;
  /* Um tom de linha só: o forte é apelido do fio. */
  --border-strong: #dcdcdc;
  --text: #000000;
  --text-2: #555555;
  /* #606060: o piso que passa 4,5:1 nos CINCO fundos claros onde o apagado
     aparece — papel #f5f5f5 (5,77), chapa de linha #f0f0f0 (5,52), hover
     #ececec (5,32), chapa forte #e6e6e6 (5,04) e pressionado #e0e0e0 (4,76).
     Histórico: #707070 passava só no papel (4,54) e caía a 4,19 no hover;
     #666666 passava em quatro e caía a 4,35 no pressionado. O Claude Design
     preferiu descer o piso a registrar "pressionado não conta" — exceção é
     coisa que alguém reabre. Um valor só, de propósito.
     (Comentário anterior, mantido abaixo para o histórico da decisão.)
     #707070 e não o #7a7a7a do protótipo: o apagado precisa de 4,5:1 sobre o
     papel (tests/visual-contracts.js); a diferença a olho é de um tom. */
  --text-3: #606060;
  --cancel: #555555;
  --danger: #8a2a1e;
  --danger-text: #8a2a1e;
  --danger-soft: rgba(138, 42, 30, .08);
  --ok: #000000;
  --ok-text: #000000;
  --warn: #555555;
  --warn-text: #555555;
  --scrim: rgba(0, 0, 0, .32);
  --shadow-1: none;
  --shadow-2: none;
  --accent: #000000;
  --accent-2: #000000;
  --accent-text: #000000;
  --accent-weak: rgba(0, 0, 0, .05);
  --on-accent: #f5f5f5;
  --dt-toque: rgba(0, 0, 0, .035);
  --dt-toque-forte: rgba(0, 0, 0, .085);
}

/* Colorido (19/09/2026) — o único tema com cor, tirado do cartaz de ondas que
   o dono mandou: creme, azul-noite, petróleo, turquesa, laranja, tijolo,
   mostarda, oliva.

   É um tema de BASE CLARA. A tela veste data-dt-theme="light" — tudo o que o
   Claro já acertou continua valendo — e ganha data-dt-paleta="colorido" por
   cima. Este bloco vem DEPOIS do Claro para vencer no empate de peso.

   Regra da paleta: papel creme e tinta azul-noite fazem a leitura; a cor entra
   como PREENCHIMENTO de bloco (tema-colorido.css), nunca como texto solto
   sobre o creme — a não ser o petróleo (--accent-text) e o tijolo (--danger),
   que passam de 6:1. O vermelho-brasa #f03000 não recebe texto: 4,4:1 com a
   tinta e 3,2:1 com o creme. Fica para fio, ponto e barra.

   Os --cor-* são os blocos do cartaz; o par de cada um (--sobre-*) é a tinta
   que lê por cima dele com 4,5:1 ou mais. Medidos em
   tests/tema-colorido-contracts.js. */
[data-dt-paleta="colorido"] {
  --bg: #f3e3c8;
  --bg-elev: #fbf3e4;
  --surface-1: #f3e3c8;
  /* No Colorido o hover ACENDE: fica mais claro que o papel, não mais escuro.
     O apagado da casca é uma mistura de 60% da tinta com o papel (#65645f);
     sobre um hover escurecido ele caía a 3,9:1, e nem tinta preta salvava.
     Clareando, todo estado de ponteiro ganha contraste em vez de perder. */
  --surface-2: #fbf3e4;
  --surface-3: #fffaf0;
  --chapa: #e4cda4;
  --border: #d9c29c;
  --border-strong: #d9c29c;
  /* Tinta #071019, um fio mais escura que o azul-noite dos blocos (#0c1824):
     é o que leva a mistura de 60% a 4,7:1 sobre o papel. A olho é a mesma cor. */
  --text: #071019;
  --text-2: #1f3a47;
  --text-3: #415158;
  --cancel: #415158;
  --danger: #9c1800;
  --danger-text: #9c1800;
  --danger-soft: rgba(156, 24, 0, .10);
  --ok: #306c6c;
  --ok-text: #184854;
  --warn: #cc9000;
  --warn-text: #6b5000;
  --scrim: rgba(12, 24, 36, .55);
  --shadow-1: none;
  --shadow-2: none;
  --accent: #fc7800;
  --accent-2: #fc9000;
  --accent-text: #184854;
  --accent-weak: rgba(252, 120, 0, .14);
  --on-accent: #071019;
  --dt-toque: rgba(12, 24, 36, .05);
  --dt-toque-forte: rgba(12, 24, 36, .10);

  --cor-noite: #0c1824;
  --cor-azul: #183c54;
  --cor-petroleo: #184854;
  --cor-ardosia: #30606c;
  --cor-turquesa: #489c9c;
  --cor-laranja: #fc7800;
  --cor-ambar: #fc9000;
  --cor-brasa: #f03000;
  --cor-tijolo: #a81800;
  --cor-mostarda: #cc9000;
  --cor-oliva: #48480c;
  --cor-creme: #e4c09c;
  --sobre-escuro: #f3e3c8;   /* noite, azul, petróleo, ardósia, tijolo, oliva */
  --sobre-claro: #0c1824;    /* turquesa, laranja, âmbar, mostarda, creme */
}