/*
 * Trabalho Temporário Redbeard — tokens-temporada.css
 * Design system do produto · Direção B "Pista rápida" · Paleta 2 "Pista"
 * (decisão de Daniel, 02/10/2026; ver docs/design/direcoes-visuais.html e
 * docs/estrategia/00-fase-1-investigacao-e-proposta.md seção 6).
 *
 * FONTE DA VERDADE deste produto. Este arquivo é editado à mão (não há tokens.json
 * paralelo, de propósito: um alvo só, uma plataforma só — ver README, "Formato").
 * Todo par texto/fundo declarado aqui foi MEDIDO com
 * ~/.claude/skills/design-system/scripts/contraste.py; os números estão nos
 * comentários e a lista reexecutável está em contraste-pares.json.
 *
 * Camadas: primitivo (valor bruto, componente nunca usa direto) → semântico (papel na
 * interface, é o que o tema sobrescreve) → componente (escopo estreito, só quando o
 * semântico não basta).
 */

:root {
  /* ======================= 1. PRIMITIVOS ======================= */

  /* verde pista — cor de ação e assinatura do produto */
  --tp-verde-700: #0B6E4F;
  --tp-verde-800: #085A40;
  --tp-verde-050: #E4F0EA;
  --tp-verde-400-dark: #35C48C;   /* só tema escuro: o verde 700 reprova sobre painel */
  --tp-verde-300-dark: #5AD3A4;
  --tp-verde-950-dark: #11251D;

  /* azul apoio — informação, nunca ação */
  --tp-azul-700: #1D4ED8;
  --tp-azul-050: #E3EAFB;
  --tp-azul-300-dark: #9DB8FF;
  --tp-azul-950-dark: #161F38;

  /* lima destaque — SÓ fundo e marcador, nunca texto nem gráfico sozinho (ver §2) */
  --tp-lima-300: #C7F464;

  /* neutros frios (papel, superfície, tinta) */
  --tp-neutro-000: #FFFFFF;
  --tp-neutro-025: #F4F7F5;
  --tp-neutro-075: #E9EFEB;
  --tp-neutro-150: #D9E0DC;
  --tp-neutro-400: #74847D;
  --tp-neutro-600: #5B6862;
  --tp-neutro-900: #14201B;

  /* neutros do tema escuro */
  --tp-painel-000: #101815;
  --tp-painel-100: #18221E;
  --tp-painel-200: #202C27;
  --tp-painel-300: #2F3C37;
  --tp-painel-500: #76877F;
  --tp-painel-tinta: #E9F0EC;
  --tp-painel-tinta-2: #A2B2AA;
  --tp-painel-ink: #07140F;       /* texto sobre superfície saturada no escuro */

  /* marca Redbeard — selo "pela Redbeard" e erro, nada mais */
  --tp-rb-vermelho: #E00A24;
  --tp-rb-vermelho-texto: #C1041B;  /* texto pequeno: 6,36:1 contra 4,59:1 do vivo no papel */
  --tp-rb-vermelho-dark: #FF4054;
  --tp-rb-vermelho-050: #FDE7EA;
  --tp-rb-vermelho-950-dark: #33181C;

  /* status */
  --tp-sucesso-700: #1C7A3E;
  --tp-sucesso-050: #E2F3E8;
  --tp-sucesso-400-dark: #5BC98A;
  --tp-sucesso-950-dark: #13291F;
  --tp-alerta-700: #8A5800;
  --tp-alerta-050: #F8EEDA;
  --tp-alerta-400-dark: #E6B250;
  --tp-alerta-950-dark: #2E2512;

  /* ======================= 2. SEMÂNTICO — tema claro (padrão) ======================= */

  /* superfícies e tinta */
  --cor-fundo: var(--tp-neutro-025);            /* papel */
  --cor-superficie: var(--tp-neutro-000);       /* cartão, campo, barra */
  --cor-superficie-alt: var(--tp-neutro-075);   /* trilha de progresso, linha zebrada, estado inativo */
  --cor-borda: var(--tp-neutro-150);            /* DIVISOR DECORATIVO (1,34:1): nunca a única borda de um controle */
  --cor-borda-controle: var(--tp-neutro-400);   /* borda de campo/chip/caixa: 3,93:1 no branco, 3,65:1 no papel */
  --cor-texto: var(--tp-neutro-900);            /* 16,77:1 no branco · 15,55:1 no papel */
  --cor-texto-secundario: var(--tp-neutro-600); /* 5,83:1 no branco · 5,41:1 no papel */

  /* ação (verde) */
  --cor-acao: var(--tp-verde-700);              /* 6,25:1 no branco · branco sobre ele 6,25:1 */
  --cor-acao-toque: var(--tp-verde-800);        /* hover/ativo: branco sobre ele 8,25:1 */
  --cor-acao-fundo: var(--tp-verde-050);        /* chip selecionado, faixa de ação: ação sobre ele 5,35:1 */
  --cor-sobre-acao: var(--tp-neutro-000);       /* texto e ícone dentro de superfície de ação */

  /* apoio (azul) — informação e links secundários, nunca a ação principal */
  --cor-apoio: var(--tp-azul-700);              /* 6,70:1 no branco */
  --cor-apoio-fundo: var(--tp-azul-050);        /* apoio sobre ele 5,56:1 · tinta sobre ele 13,92:1 */
  --cor-sobre-apoio: var(--tp-neutro-000);      /* 6,70:1 */

  /* destaque (lima) — fundo de selo e marcador; tinta sobre ele 13,22:1.
     PROIBIDO: texto lima (1,27:1 no branco) e gráfico lima sobre claro (1,09:1 na
     trilha). Lima só aparece carregando tinta escura em cima, ou sobre o painel. */
  --cor-destaque: var(--tp-lima-300);
  --cor-sobre-destaque: var(--tp-neutro-900);

  /* marca */
  --cor-marca: var(--tp-rb-vermelho);           /* selo "pela Redbeard": 4,95:1 no branco */

  /* status — sempre com ícone ou rótulo ao lado; cor nunca é o único sinal */
  --cor-sucesso: var(--tp-sucesso-700);         /* 5,38:1 no branco */
  --cor-sucesso-fundo: var(--tp-sucesso-050);   /* sucesso sobre ele 4,67:1 */
  --cor-alerta: var(--tp-alerta-700);           /* 6,04:1 no branco */
  --cor-alerta-fundo: var(--tp-alerta-050);     /* alerta sobre ele 5,24:1 */
  --cor-erro: var(--tp-rb-vermelho);            /* ícone, borda, botão sólido: branco sobre ele 4,95:1 */
  --cor-erro-texto: var(--tp-rb-vermelho-texto);/* mensagem de erro em corpo 14–16px: 6,36:1 */
  --cor-erro-fundo: var(--tp-rb-vermelho-050);  /* erro-texto sobre ele 5,39:1 */
  --cor-info: var(--cor-apoio);
  --cor-info-fundo: var(--cor-apoio-fundo);

  /* foco */
  --cor-foco: var(--tp-verde-700);              /* 5,80:1 contra o papel, 6,25:1 contra o cartão */
  --cor-foco-halo: var(--tp-neutro-000);        /* anel interno que separa o foco de fundo escuro */

  /* ======================= 3. TIPOGRAFIA ======================= */

  --fonte-titulo: 'Sora', system-ui, -apple-system, sans-serif;
  --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;
  --fonte-dado: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --peso-titulo: 700;
  --peso-titulo-medio: 600;
  --peso-corpo: 400;
  --peso-corpo-forte: 600;
  --peso-dado: 500;

  /* escala: 16px de base, razão ~1,25, fluida só nos degraus de display */
  --texto-rotulo: 11px;
  --texto-xs: 12px;
  --texto-sm: 14px;
  --texto-base: 16px;
  --texto-lg: 18px;
  --texto-xl: 20px;
  --texto-2xl: clamp(22px, 1.2rem + 1.2vw, 26px);
  --texto-3xl: clamp(26px, 1.3rem + 2.2vw, 34px);
  --texto-4xl: clamp(32px, 1.5rem + 4vw, 46px);
  --texto-numero: clamp(40px, 2rem + 6vw, 68px);  /* a contagem de elegíveis */

  --altura-apertada: 1.1;
  --altura-titulo: 1.2;
  --altura-corpo: 1.55;
  --altura-larga: 1.7;

  /* rótulo mono: parentesco com o DS Redbeard (mono, caixa alta, traço).
     Aqui o traço é verde, não vermelho: o vermelho fica reservado ao selo. */
  --rotulo-tracking: .14em;
  --rotulo-traco-largura: 20px;
  --rotulo-traco-altura: 2px;

  /* ======================= 4. ESPAÇO, FORMA, ELEVAÇÃO ======================= */

  /* base 4px */
  --espaco-1: 4px;   --espaco-2: 8px;   --espaco-3: 12px;  --espaco-4: 16px;
  --espaco-5: 20px;  --espaco-6: 24px;  --espaco-8: 32px;  --espaco-10: 40px;
  --espaco-12: 48px; --espaco-16: 64px; --espaco-20: 80px;

  --raio-controle: 8px;    /* botão, campo, chip retangular (geometria da Paleta 2) */
  --raio-card: 12px;
  --raio-painel: 16px;
  --raio-pilula: 999px;

  --sombra-1: 0 1px 2px rgba(11, 40, 30, .06), 0 6px 18px rgba(11, 40, 30, .06);
  --sombra-2: 0 2px 6px rgba(11, 40, 30, .08), 0 18px 40px rgba(11, 40, 30, .10);
  --sombra-foco: 0 0 0 var(--foco-largura) var(--cor-foco);

  --borda-fina: 1px;
  --borda-controle-largura: 1.5px;  /* campo e chip: 1px de cinza médio desaparece no celular */

  --foco-largura: 3px;
  --foco-offset: 2px;

  /* ======================= 5. LAYOUT ======================= */

  --gutter: var(--espaco-4);           /* 16px de respiro lateral no celular */
  --largura-conteudo: 1120px;
  --largura-leitura: 68ch;             /* abaixo de 80 caracteres, como manda a prosa */
  --largura-formulario: 34rem;         /* uma pergunta por tela não passa disto */
  --alvo-minimo: 44px;                 /* qualquer coisa tocável */

  /* ======================= 6. MOVIMENTO ======================= */

  --duracao-instantanea: 50ms;   /* caixa, chip ligando */
  --duracao-rapida: 100ms;
  --duracao-normal: 200ms;       /* padrão: foco, dropdown */
  --duracao-moderada: 300ms;     /* painel, modal */
  --duracao-lenta: 400ms;        /* a contagem rolando, uma vez por tela */
  --easing-padrao: cubic-bezier(.4, 0, .2, 1);
  --easing-entrada: cubic-bezier(0, 0, .2, 1);
  --easing-saida: cubic-bezier(.4, 0, 1, 1);
  --easing-linear: linear;       /* só o giro do carregando */

  /* ======================= 7. COMPONENTE (escopo estreito) ======================= */

  --botao-altura: 44px;
  --botao-altura-grande: 52px;
  --campo-altura: 48px;          /* dedo em celular, com rótulo fora do campo */
  --chip-altura: 44px;
  --funil-trilha-altura: 10px;
  --tabela-linha-altura: 52px;

  color-scheme: light;
}

/* ======================= 8. TEMA ESCURO ======================= */
/* Não é inversão: luminância menor, cores dessaturadas, elevação por superfície mais
   clara (a sombra não funciona no escuro), tinta off-white. Só a camada semântica muda.
   O verde 700 e o vermelho vivo reprovam sobre o painel; entram as versões claras. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cor-fundo: var(--tp-painel-000);
    --cor-superficie: var(--tp-painel-100);
    --cor-superficie-alt: var(--tp-painel-200);
    --cor-borda: var(--tp-painel-300);            /* divisor decorativo, 1,42:1 */
    --cor-borda-controle: var(--tp-painel-500);   /* 4,31:1 na superfície */
    --cor-texto: var(--tp-painel-tinta);          /* 14,10:1 na superfície */
    --cor-texto-secundario: var(--tp-painel-tinta-2); /* 7,37:1 */

    --cor-acao: var(--tp-verde-400-dark);         /* 7,33:1 na superfície */
    --cor-acao-toque: var(--tp-verde-300-dark);
    --cor-acao-fundo: var(--tp-verde-950-dark);   /* ação sobre ele 7,22:1 */
    --cor-sobre-acao: var(--tp-painel-ink);       /* 8,45:1 dentro do botão verde claro */

    --cor-apoio: var(--tp-azul-300-dark);         /* 8,34:1 */
    --cor-apoio-fundo: var(--tp-azul-950-dark);
    --cor-sobre-apoio: var(--tp-painel-ink);

    --cor-marca: var(--tp-rb-vermelho-dark);      /* 5,25:1; o vivo cai a 3,64:1 */

    --cor-sucesso: var(--tp-sucesso-400-dark);
    --cor-sucesso-fundo: var(--tp-sucesso-950-dark);
    --cor-alerta: var(--tp-alerta-400-dark);
    --cor-alerta-fundo: var(--tp-alerta-950-dark);
    --cor-erro: var(--tp-rb-vermelho-dark);       /* 5,25:1 */
    --cor-erro-texto: #FF7A86;                    /* 6,51:1 na superfície */
    --cor-erro-fundo: var(--tp-rb-vermelho-950-dark);
    --cor-info: var(--tp-azul-300-dark);
    --cor-info-fundo: var(--tp-azul-950-dark);

    --cor-foco: var(--tp-verde-400-dark);         /* 8,10:1 contra o painel */
    --cor-foco-halo: var(--tp-painel-000);

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
    --sombra-2: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }
}

/* chave manual: sobrescreve a preferência do sistema nos dois sentidos */
:root[data-theme="dark"] {
  --cor-fundo: var(--tp-painel-000);
  --cor-superficie: var(--tp-painel-100);
  --cor-superficie-alt: var(--tp-painel-200);
  --cor-borda: var(--tp-painel-300);
  --cor-borda-controle: var(--tp-painel-500);
  --cor-texto: var(--tp-painel-tinta);
  --cor-texto-secundario: var(--tp-painel-tinta-2);

  --cor-acao: var(--tp-verde-400-dark);
  --cor-acao-toque: var(--tp-verde-300-dark);
  --cor-acao-fundo: var(--tp-verde-950-dark);
  --cor-sobre-acao: var(--tp-painel-ink);

  --cor-apoio: var(--tp-azul-300-dark);
  --cor-apoio-fundo: var(--tp-azul-950-dark);
  --cor-sobre-apoio: var(--tp-painel-ink);

  --cor-marca: var(--tp-rb-vermelho-dark);

  --cor-sucesso: var(--tp-sucesso-400-dark);
  --cor-sucesso-fundo: var(--tp-sucesso-950-dark);
  --cor-alerta: var(--tp-alerta-400-dark);
  --cor-alerta-fundo: var(--tp-alerta-950-dark);
  --cor-erro: var(--tp-rb-vermelho-dark);
  --cor-erro-texto: #FF7A86;
  --cor-erro-fundo: var(--tp-rb-vermelho-950-dark);
  --cor-info: var(--tp-azul-300-dark);
  --cor-info-fundo: var(--tp-azul-950-dark);

  --cor-foco: var(--tp-verde-400-dark);
  --cor-foco-halo: var(--tp-painel-000);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

/* ======================= 9. MOVIMENTO REDUZIDO ======================= */
/* Override no root, não componente a componente. O giro do carregando sobrevive,
   porque ali o movimento É a informação de estado. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-instantanea: 1ms;
    --duracao-rapida: 1ms;
    --duracao-normal: 1ms;
    --duracao-moderada: 1ms;
    --duracao-lenta: 1ms;
  }
}