/* Mundário — tokens da marca para o site. Coloque na raiz pública e carregue depois das fontes. */
:root {
  /* paleta */
  --laranja: #FF6F3C;        /* preenchimentos: botões de destaque, pins, fundos */
  --laranja-600: #E2541F;    /* laranja para títulos >=24px e ícones sobre claro */
  --laranja-700: #B9461F;    /* laranja para texto pequeno sobre claro */
  --tinta: #1B2140;          /* texto, logo, botão primário */
  --papel: #FFF6EA;          /* fundo da marca */
  --areia: #F2E6D3;
  --ceu: #9CC9FF;
  --sol: #FFC24B;

  /* papéis */
  --fundo: var(--papel);
  --superficie: #FFFFFF;
  --texto: var(--tinta);
  --texto-suave: #5F5B6B;
  --acento: var(--laranja-700);
  --acento-forte: var(--laranja-600);
  --on-laranja: var(--tinta);  /* texto sobre laranja é SEMPRE tinta */
  --on-tinta: var(--papel);
  --borda: #EADFCD;
  --borda-controle: #968A79;
  --foco: var(--tinta);

  /* tipografia */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mao: "Caveat", "Segoe Print", cursive;

  /* forma */
  --raio-sm: 8px; --raio-md: 14px; --raio-lg: 20px; --raio-xl: 28px; --raio-pilula: 999px;
  --sombra-cartao: 0 1px 2px rgba(27, 33, 64, .06), 0 8px 24px rgba(27, 33, 64, .08);
  --sombra-flutuante: 0 12px 40px rgba(27, 33, 64, .18);
}

body { background: var(--fundo); color: var(--texto); font-family: var(--font-ui); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
/* palavra de destaque dentro do título: <h1>A sua volta ao mundo, <em>um dia de cada vez.</em></h1> */
h1 em, h2 em, .destaque { font-style: italic; font-weight: 500; color: var(--acento-forte); }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: var(--raio-pilula); font: 600 16px/1 var(--font-ui); border: 0; cursor: pointer; text-decoration: none; }
.btn-primario { background: var(--tinta); color: var(--on-tinta); }
.btn-destaque { background: var(--laranja); color: var(--on-laranja); }
.btn-secundario { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px var(--borda-controle); }
.btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.rotulo { font: 700 12px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.cartao { background: var(--superficie); border-radius: var(--raio-lg); box-shadow: inset 0 0 0 1.5px var(--borda), var(--sombra-cartao); }
.texto-diario { font-family: var(--font-display); font-variation-settings: "SOFT" 50; font-size: 18px; line-height: 1.6; }