/*
  SYMBIOTA — base.css
  Tokens, reset e tipografia base.
  Sem dependências externas de fontes: usa a stack nativa do sistema
  operativo, o que elimina pedidos de rede extra e mantém o site rápido
  em ligações móveis mais lentas.
*/

:root {
  /* ---- Cor: azul e dourado, extraídos e ajustados a partir do logótipo ---- */
  --navy-950: #060f1e;
  --navy-900: #0a1a30;
  --navy-800: #12294a;
  --navy-700: #1a3a63;

  --blue-700: #0b4c8c;
  --blue-600: #0d6fc7;
  --blue-500: #1e88e5;
  --blue-100: #e7f1fc;
  --blue-50: #f4f9fe;

  --gold-700: #8a6208;
  --gold-600: #b3860b;
  --gold-500: #d99e0e;
  --gold-400: #eab625;
  --gold-100: #fdf3dc;

  --ink-900: #12161c;
  --ink-700: #33404f;
  --ink-600: #4b5c70;
  --ink-400: #7c8aa0;

  --line: #e2e8f2;
  --line-strong: #c7d1e0;
  --paper: #ffffff;
  --paper-alt: #f6f9fc;

  --success: #1a7f4e;
  --danger: #b3261e;

  /* ---- Tipografia (stack nativa, sem fontes externas) ---- */
  --font-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    system-ui, sans-serif;

  --step-xs: 0.8rem;
  --step-sm: 0.9rem;
  --step-base: 1rem;
  --step-md: 1.15rem;
  --step-lg: 1.4rem;
  --step-xl: 1.9rem;
  --step-2xl: 2.5rem;
  --step-3xl: 3.2rem;

  /* ---- Espaçamento ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* ---- Layout ---- */
  --container-w: 1180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(10, 26, 48, 0.06), 0 1px 1px rgba(10, 26, 48, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 26, 48, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 26, 48, 0.16);

  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);
}

/* ---------------------------------------------------------------- */
/* Reset simples                                                    */
/* ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--step-base);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visível — acessibilidade por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- */
/* Tipografia                                                       */
/* ---------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--gold-500);
  display: inline-block;
}

.eyebrow--on-dark {
  color: var(--gold-400);
}

h1,
.h1 {
  font-size: clamp(2rem, 1.55rem + 2vw, var(--step-3xl));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--navy-900);
}

h2,
.h2 {
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, var(--step-2xl));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--navy-900);
}

h3,
.h3 {
  font-size: var(--step-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
}

h4,
.h4 {
  font-size: var(--step-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-900);
}

.lead {
  font-size: var(--step-md);
  color: var(--ink-600);
  line-height: 1.7;
}

.text-muted {
  color: var(--ink-600);
}

.text-on-dark {
  color: rgba(255, 255, 255, 0.86);
}

strong {
  font-weight: 700;
  color: var(--navy-900);
}