/* =========================================================================
   === DESIGN SYSTEM (tokens + componentes) ===
   Fonte: ywam-kona-health-care-ministries-ds-for-ai.md — valores INVIOLÁVEIS.
   Compartilhado pelas 3 páginas do site (index/Bio, conferência de Recife,
   congresso de Curitiba). Nenhum hex inventado. Regra do Gold e contraste
   respeitados. Estilos exclusivos de cada página ficam em css/bio.css,
   css/recife.css e css/curitiba.css (carregados depois deste arquivo).
   ========================================================================= */
:root {
  /* --- Brand ramps --- */
  --navy-50:#eceff2; --navy-100:#d9dfe4; --navy-200:#b2bec9; --navy-300:#8296a8;
  --navy-400:#49657f; --navy-500:#0f3557; --navy-600:#0c2b47; --navy-700:#0a2339;
  --navy-800:#07192a; --navy-900:#05101a;
  --teal-50:#edf4f6; --teal-100:#dbeaed; --teal-200:#b7d4da; --teal-300:#8bbac3;
  --teal-400:#559aa8; --teal-500:#1f7a8c; --teal-600:#196473; --teal-700:#14515c;
  --teal-800:#0f3b43; --teal-900:#09252a;
  --gold-50:#fcf7ec; --gold-100:#f8f0da; --gold-200:#f1e1b5; --gold-300:#e9ce86;
  --gold-400:#deb74f; --gold-500:#d4a017; --gold-600:#ae8313; --gold-700:#8c6a0f;
  --gold-800:#664d0b; --gold-900:#403007;
  --mint-100:#f6fcfc; --mint-200:#edf9f9; --mint-300:#e2f6f5; --mint-400:#d4f1f0;
  --mint-500:#c7edeb;
  --neutral-50:#fafaf9; --neutral-100:#f5f5f4; --neutral-200:#c9d0d7;
  --neutral-400:#7f8fa1; --neutral-500:#576b83; --neutral-600:#47586b;

  /* --- Theme tokens (light mode default) --- */
  --background:#fafaf9;
  --surface:#ffffff;
  --surface-alt:#f5f5f4;
  --card:#ffffff;
  --muted:#f5f5f4;
  --muted-foreground:#47586b;
  --foreground:#0a2239;
  --border:#c9d0d7;
  --border-strong:#7f8fa1;
  --ring:#1f7a8c;
  --primary:#0f3557;
  --primary-foreground:#ffffff;
  --secondary:#1f7a8c;
  --secondary-foreground:#ffffff;
  --accent:#d4a017;            /* Gold — decorativo/grande apenas */
  --accent-foreground:#0a2239;
  --accent-soft:#f6fcfc;
  --accent-on-dark:#deb74f;    /* Gold — ÚNICO gold permitido como texto (só sobre Navy) */

  /* --- Spacing (base 4px) --- */
  --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:40px;
  --sp-2xl:64px; --sp-3xl:96px;

  /* --- Radius --- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* --- Shadows (soft, navy tint) --- */
  --sh-xs:0 1px 2px rgba(10,34,57,.06);
  --sh-sm:0 1px 3px rgba(10,34,57,.08),0 1px 2px rgba(10,34,57,.06);
  --sh-md:0 4px 12px rgba(10,34,57,.10);
  --sh-lg:0 12px 28px rgba(10,34,57,.14);
  --sh-focus:0 0 0 3px rgba(31,122,140,.35);

  /* --- Type --- */
  --font-display:"Nunito", system-ui, sans-serif;
  --font-body:"Inter", "Source Sans 3", system-ui, sans-serif;

  --container:1120px;
}

/* --- Reset / base (cada página pode complementar html{}/body{}/a{} com o
   que for específico dela — ver css/bio.css, css/recife.css, css/curitiba.css) --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--foreground);
  font-family:var(--font-body); font-weight:400; line-height:1.6;
  font-size:1rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
figure{ margin:0; }
a{ text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; color:var(--foreground); }
p{ margin:0; }
::selection{ background:var(--teal-100); color:var(--navy-700); }

/* --- Type scale --- */
.t-display{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,5.2vw,3.5rem); line-height:1.05; letter-spacing:-.02em; }
.t-h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,2.5rem); line-height:1.1; letter-spacing:-.02em; }
.t-h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2rem); line-height:1.15; letter-spacing:-.01em; }
.t-h3{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.25; }
.t-h4{ font-family:var(--font-body); font-weight:600; font-size:1.25rem; line-height:1.35; }
.t-lead{ font-size:clamp(1.05rem,1.6vw,1.125rem); line-height:1.6; color:var(--muted-foreground); }
.t-sm{ font-size:.875rem; line-height:1.5; }
.eyebrow{
  font-size:.75rem; font-weight:600; line-height:1.33; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-600);
}

/* --- Layout helpers --- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-lg); }
.section{ padding-block:var(--sp-3xl); }
.section--tight{ padding-block:var(--sp-2xl); }
.measure{ max-width:64ch; }

@media (max-width:640px){
  .section{ padding-block:var(--sp-xl); }
  .section--tight{ padding-block:var(--sp-lg); }
}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1;
  padding:14px 24px; border-radius:var(--r-md); border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
.btn--primary{ background:var(--primary); color:var(--primary-foreground); }
.btn--primary:hover{ background:var(--navy-700); transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn--secondary{ background:var(--secondary); color:var(--secondary-foreground); }
.btn--secondary:hover{ background:var(--teal-700); transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn--accent{ background:var(--accent); color:var(--accent-foreground); } /* Gold fill — uso pontual */
.btn--accent:hover{ background:var(--gold-600); color:#fff; transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn--outline{ background:transparent; border-color:var(--border-strong); color:var(--navy-600); }
.btn--outline:hover{ border-color:var(--teal-500); color:var(--teal-700); transform:translateY(-2px); }
.btn--ondark{ background:#fff; color:var(--navy-700); }
.btn--ondark:hover{ background:var(--navy-50); transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn--ghost-ondark{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn--ghost-ondark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--sm{ padding:10px 18px; font-size:.9rem; }
.btn--full{ width:100%; }

/* --- Badge / pill --- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body);
  font-weight:600; font-size:.72rem; line-height:1; letter-spacing:.02em;
  padding:7px 12px; border-radius:var(--r-full);
}
.badge--navy{ background:var(--navy-500); color:#fff; }
.badge--teal{ background:var(--mint-300); color:var(--teal-800); }
.badge--accent{ background:var(--gold-100); color:var(--gold-800); }
.badge--outline{ background:transparent; border:1px solid var(--border); color:var(--muted-foreground); }
.badge--ondark{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18); }

/* --- Card --- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); overflow:hidden;
}

/* --- Alert --- */
.alert{
  border-radius:var(--r-md); padding:var(--sp-md) var(--sp-lg);
  border-left:4px solid var(--accent); background:var(--gold-50); color:var(--navy-700);
  font-size:.9rem; line-height:1.55;
}

/* --- Focus ring for interactive --- */
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-sm); }

/* --- Scroll reveal (usado por js/base.js) --- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .btn, .axis, .speaker{ transition:none; }
}