/* ALYSSA OHNO — generated from tokens.json */
:root, [data-theme="light"] {
  --blue: #4a4aa0; /* Cor da marca (R74 G74 B160). Fundos de bloco, logo em cor sobre paper e texto de destaque sobre paper. Contraste com paper: 6,9:1. */
  --paper: #f7f5ee; /* Creme (R247 G245 B238). Fundo padrão de páginas e logo em cor invertida. Texto sobre blue: use paper (6,9:1). */
}
:root {
  --space-1: 8px; /* Espaço entre elementos próximos. */
  --space-2: 16px; /* Espaço interno padrão e entre parágrafos. */
  --space-3: 24px; /* Entre grupos de conteúdo. */
  --space-4: 48px; /* Margens de página e entre seções. */
  --radius-sm: 2px; /* Cantos do logo e de blocos retos. */
  --radius-md: 8px; /* Imagens e cartões. */
  --radius-full: 50%; /* Discos e formas circulares, como o círculo do logo. */
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --text-display: 400 30px/64px var(--font-sans); /* Títulos de página. Sempre em Regular (400) e caixa alta. */
  --text-title: 400 20px/38px var(--font-sans); /* Títulos de seção. Sempre em Regular (400) e caixa alta. */
  --text-body: 400 16px/24px var(--font-sans); /* Texto corrido. */
  --text-label: 600 13px/16px var(--font-sans); /* Legendas, menus e rótulos. */
}
/* Regras de texto: sem hifenização e sem viúvas (última linha nunca com uma palavra só; ligar as duas últimas com espaço não separável). */
body, .display, .title, .body, .label { hyphens: none; -webkit-hyphens: none; }
.display {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 64px;
  font-weight: 400;
  letter-spacing: 0;
}
.title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
