/* Copia de src/tokens.css do repositorio do site (UmAtletaIA/site), sha 6f1e1e041ecd6c339dc5c8db92a4b9ec33d397cd
 * (origin/main, design system do card #975). Fonte unica das cores: para atualizar, copie de novo o arquivo do site e
 * troque o sha aqui; nao edite o resto deste arquivo. Vale so para as telas antes do login (login, convite do beta e
 * demo), via pre-login.css; o app logado segue no CSS dele (card #978).
 * O bloco @theme inline abaixo e do Tailwind e o navegador ignora: ficou para a copia bater linha a linha.
 */

/* Tokens do UmAtletaIA (design system, card #975): cores, raio e fontes, nos temas escuro (padrão) e claro.
 * Este arquivo é a fonte única das cores. Para usar em outro projeto (login, convite do beta, demo), copie-o inteiro e
 * importe depois do Tailwind; as fontes estão em src/fonts.css e os arquivos em public/fonts/.
 * Regras de uso e como pedir token ou componente novo: docs/design.md. Página com tudo à vista: /estilo.
 *
 * O tema escuro é o padrão (:root); o claro liga com a classe .light no <html>. Toda cor entra nos dois temas.
 * A classe .dark repete o escuro num pedaço da página (a /estilo mostra os dois temas lado a lado).
 */

@theme inline {
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-surface: var(--surface);
  --color-signal: var(--signal);
  --color-warn: var(--warn);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
}

:root,
.dark {
  --radius: 0.75rem;
  --background: oklch(0.16 0.008 250);
  --foreground: oklch(0.96 0.005 100);
  --card: oklch(0.2 0.01 250);
  --card-foreground: oklch(0.96 0.005 100);
  --popover: oklch(0.2 0.01 250);
  --popover-foreground: oklch(0.96 0.005 100);
  --surface: oklch(0.23 0.012 250);
  --primary: oklch(0.9 0.2 125);
  --primary-foreground: oklch(0.18 0.02 125);
  --secondary: oklch(0.26 0.012 250);
  --secondary-foreground: oklch(0.96 0.005 100);
  --muted: oklch(0.24 0.01 250);
  --muted-foreground: oklch(0.7 0.012 250);
  --accent: oklch(0.72 0.17 35);
  --accent-foreground: oklch(0.16 0.008 250);
  --signal: oklch(0.78 0.12 220);
  --warn: oklch(0.82 0.15 80);
  --destructive: oklch(0.65 0.2 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(1 0 0 / 9%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.9 0.2 125);
  --gradient-glow: radial-gradient(60% 50% at 70% 0%, oklch(0.9 0.2 125 / 18%), transparent 70%);
  --gradient-fade: linear-gradient(90deg, oklch(0.16 0.008 250) 25%, oklch(0.16 0.008 250 / 60%) 55%, transparent);
  --shadow-lime: 0 10px 40px -10px oklch(0.9 0.2 125 / 45%);
  --brand: oklch(0.9 0.2 125);
  --brand-foreground: oklch(0.18 0.02 125);
  --grid-line: oklch(1 0 0 / 4%);
  color-scheme: dark;
}

.light {
  --background: oklch(0.985 0.004 110);
  --foreground: oklch(0.18 0.012 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.012 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.012 250);
  --surface: oklch(0.96 0.006 110);
  /* Tons do tema claro escurecidos para passar no contraste AA (4,5:1) sobre o fundo e as superfícies claras. */
  --primary: oklch(0.5 0.15 132);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.94 0.006 110);
  --secondary-foreground: oklch(0.18 0.012 250);
  --muted: oklch(0.95 0.005 110);
  --muted-foreground: oklch(0.46 0.012 250);
  --accent: oklch(0.53 0.18 35);
  --accent-foreground: oklch(0.99 0 0);
  --signal: oklch(0.51 0.13 230);
  --warn: oklch(0.51 0.15 70);
  --destructive: oklch(0.56 0.21 25);
  --border: oklch(0.18 0.012 250 / 10%);
  --input: oklch(0.18 0.012 250 / 16%);
  --ring: oklch(0.5 0.15 132);
  --gradient-glow: radial-gradient(60% 50% at 70% 0%, oklch(0.9 0.2 125 / 30%), transparent 70%);
  --gradient-fade: linear-gradient(90deg, oklch(0.985 0.004 110 / 92%) 20%, oklch(0.985 0.004 110 / 60%) 46%, transparent 72%);
  --shadow-lime: 0 10px 30px -12px oklch(0.6 0.18 130 / 45%);
  --grid-line: oklch(0.18 0.012 250 / 5%);
  color-scheme: light;
}

/* Dentro de um pedaço com .dark ou .light (a /estilo), as variáveis de cor do Tailwind voltam a apontar para os tokens
 * dali; sem isto, a cor da borda, do foco e do eyebrow viriam do tema da página. Na página inteira, o valor é o mesmo. */
.dark,
.light {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-surface: var(--surface);
  --color-signal: var(--signal);
  --color-warn: var(--warn);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
}