/*
 * Sammuel Design System — tokens.
 *
 * Os mesmos nomes e valores de src/styles.css, onde o app os define (fonte única).
 * Este arquivo serve à referência visual (escopo-landing.html) e a páginas fora do app,
 * como a landing. tests/design-tokens.test.ts falha se os dois divergirem: mudou um
 * valor, mude nos dois.
 *
 * Não colar no app: lá os tokens já existem, com utilitários do Tailwind
 * (bg-brand-500, text-ink, bg-navy-1, rounded-card…). Tabela em DESIGN.md, "No código".
 */
:root {
  /* Azul Sammuel: a cor de ação */
  --brand-300: #3bb7f0;
  --brand-350: #2fb4f4;
  --brand-400: #27b0f3;
  --brand-450: #1fa9ef;
  --brand-500: #0b9ee8;
  --brand-600: #0889d6;
  --brand-700: #0a86d3;

  /* Azul-safira: fundo das seções de impacto, do claro ao escuro */
  --navy-1: #163f86;
  --navy-2: #10306c;
  --navy-3: #0b2453;
  --navy-4: #081a3e;

  /* Ciano: só sobre o azul-safira */
  --cyan: #5ccbff;
  --cyan-soft: #8fdcff;

  /* Texto */
  --ink: #0a1b2b;
  --body: #33465a;
  --text-muted: #5b6b7b;
  --soft: #8a98a6;

  /* Fundos */
  --page: #f2f8fd;
  --card: oklch(1 0 0); /* branco, escrito como no app */
  --surface-2: #f6f9fc;

  /* Gradientes */
  --gradient-button: linear-gradient(135deg, var(--brand-450), var(--brand-700));
  --gradient-badge: linear-gradient(145deg, var(--brand-350), var(--brand-600));
  --gradient-navy: linear-gradient(165deg, var(--navy-1) 0%, var(--navy-2) 45%, var(--navy-3) 78%, var(--navy-4) 100%);

  /* Sombras (nunca bordas) */
  --sh-sm: 0 1px 2px rgb(10 27 43 / 0.04), 0 4px 12px rgb(10 27 43 / 0.06);
  --sh-md: 0 2px 4px rgb(10 27 43 / 0.04), 0 12px 28px rgb(10 27 43 / 0.08);
  --sh-blue: 0 12px 26px rgb(11 158 232 / 0.38), inset 0 1px 0 rgb(255 255 255 / 0.35);

  /* Medidas: botões e campos, controles compactos, card e painel */
  --control-h: 56px;
  --control-r: 18px;
  --compact-h: 36px;
  --compact-r: 11px;
  --card-r: 22px;
  --panel-r: 28px;
}