/* ÁTRIA TECH · Design tokens · v1.0 · junho de 2026 */

:root {
  /* Abissal: fundos e profundidade */
  --atria-abissal-950: #02050B;
  --atria-abissal-900: #050A13;
  --atria-abissal-800: #0A1322;
  --atria-abissal-700: #101C30;
  --atria-abissal-600: #16263F;

  /* Gelo: luz, texto e ação */
  --atria-gelo-50: #F5FAFF;
  --atria-gelo-100: #EAF3FF;
  --atria-gelo-200: #D8E9FF;
  --atria-gelo-300: #C2DCFF;
  --atria-gelo-400: #A6CCFB;
  --atria-gelo-500: #8FBCF5;

  /* Névoa: apoio e hierarquia */
  --atria-nevoa-400: #8FA3BF;
  --atria-nevoa-500: #6B7E9C;
  --atria-nevoa-600: #4C5D7A;
  --atria-nevoa-700: #33415C;

  /* Feedback */
  --atria-sucesso: #6FDCB8;
  --atria-alerta: #E8C476;
  --atria-erro: #F2778D;

  /* Cores semânticas */
  --cor-fundo: var(--atria-abissal-900);
  --cor-fundo-profundo: var(--atria-abissal-950);
  --cor-superficie: var(--atria-abissal-800);
  --cor-superficie-2: var(--atria-abissal-700);
  --cor-borda: rgba(234, 243, 255, .08);
  --cor-borda-forte: rgba(234, 243, 255, .16);
  --cor-texto: var(--atria-gelo-100);
  --cor-texto-2: var(--atria-nevoa-400);
  --cor-texto-3: var(--atria-nevoa-500);
  --cor-acento: var(--atria-gelo-300);
  --cor-interativo-bg: var(--atria-gelo-100);
  --cor-interativo-texto: var(--atria-abissal-900);
  --cor-foco: var(--atria-gelo-300);

  /* Luz */
  --brilho-suave: 0 0 24px rgba(166, 204, 251, .18);
  --brilho-medio: 0 0 40px rgba(166, 204, 251, .28);
  --brilho-nucleo: 0 0 80px rgba(234, 243, 255, .35);

  /* Gradientes */
  --grad-veu: linear-gradient(180deg, #081020 0%, #050A13 100%);
  --grad-halo: radial-gradient(circle, rgba(234, 243, 255, .16) 0%, rgba(166, 204, 251, .05) 45%, transparent 70%);
  --grad-raio: linear-gradient(180deg, #F5FAFF 0%, #8FBCF5 100%);

  /* Tipografia */
  --fonte-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "JetBrains Mono", "Cascadia Code", monospace;

  --texto-display: clamp(2.75rem, 6vw, 4.25rem);
  --texto-h1: clamp(2.25rem, 4.5vw, 3rem);
  --texto-h2: clamp(1.75rem, 3vw, 2.25rem);
  --texto-h3: 1.5rem;
  --texto-h4: 1.25rem;
  --texto-corpo: 1.0625rem;
  --texto-pequeno: .9375rem;
  --texto-legenda: .8125rem;
  --texto-overline: .75rem;

  --tracking-marca: .42em;
  --tracking-overline: .3em;
  --tracking-titulo: -.01em;
  --altura-linha-titulo: 1.1;
  --altura-linha-corpo: 1.65;

  /* Espaço */
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-24: 6rem;
  --esp-32: 8rem;

  /* Forma */
  --raio-s: 8px;
  --raio-m: 14px;
  --raio-g: 20px;
  --raio-pill: 999px;
  --borda-hairline: 1px solid var(--cor-borda);

  /* Movimento */
  --transicao-rapida: 150ms ease;
  --transicao-suave: 300ms cubic-bezier(.4, 0, .2, 1);
  --transicao-lenta: 800ms cubic-bezier(.4, 0, .2, 1);

  /* Layout */
  --largura-conteudo: 1080px;
  --largura-texto: 68ch;
}

.atria-base {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-corpo);
  line-height: var(--altura-linha-corpo);
  -webkit-font-smoothing: antialiased;
}

.atria-base ::selection {
  background: var(--atria-gelo-300);
  color: var(--atria-abissal-900);
}

.atria-base :focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}