/* GEMCAP · base: reset, page, type roles, focus, selection, links, layout helpers.
   Needs tokens.css + fonts.css. Every page loads it before components.css (nav.css and hero.css after). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0; background: var(--color-canvas); color: var(--color-ink);
  font-family: var(--font-text); font-size: var(--text-body); line-height: var(--leading-body);
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { min-width: 0; padding: 0; border: 0; }
legend { padding: 0; }
img, svg, video, picture { display: block; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
::selection { background: var(--color-selection); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* never a focus box after a mouse click or a tap (Arthur, 2026-10-05: "odeio isso, não quero em nenhum website"):
   the page starts in pointer mode and only Tab switches to keyboard mode (inline script in Base.astro, TMC's fix); the
   ring stays for keyboard users (WCAG 2.4.7) and on text fields */
:root[data-input="pointer"] :focus-visible:not(input, textarea, select) { outline: none; }

/* type roles (DESIGN.md > Typography). Headlines: wide 800; titles: normal width 700; reading: 400 */
h1, .t-h1, h2, .t-h2, .t-display, .t-figure {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--tracking-display); text-wrap: balance;
}
.t-display { font-size: var(--text-display); line-height: var(--leading-display); }
h1, .t-h1 { font-size: var(--text-h1); line-height: var(--leading-display); max-width: 17ch; }
h2, .t-h2 { font-size: var(--text-h2); line-height: var(--leading-heading); max-width: 21ch; }
.t-figure { font-size: var(--text-figure); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
h3, .t-h3 { font-family: var(--font-text); font-size: var(--text-h3); font-weight: 700; line-height: var(--leading-title); text-wrap: balance; }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); max-width: 52ch; }
p { text-wrap: pretty; }
.t-small, small { font-size: var(--text-small); line-height: var(--leading-small); }
.t-overline { font-size: var(--text-overline); font-weight: 700; line-height: 1.3; letter-spacing: var(--tracking-overline); text-transform: uppercase; }
.muted { color: var(--color-ink-muted); }

/* layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-surface-1); }
/* the brand blue as resolved on the root (follows any palette set on <html>), for the bands that re-map --color-blue */
:root { --blue-base: var(--color-blue); --navy-base: var(--color-navy); }
/* high-contrast bands (feedback 2026-10-05: "muito branco, sem mudança de contraste"): a few sections per page, never
   two in a row. They re-map the colour roles, so every component inside reads light-on-dark without its own rules.
   Navy = the brand's ink as a field; blue = GEMCAP Blue as a field (white 6.1:1, muted #DCE7FB 4.9:1). */
.section--navy, .section--blue, .band--navy, .statement {
  --color-ink: #FFFFFF; --color-ink-muted: var(--color-inverse-muted); --color-hairline: rgb(255 255 255 / 0.16);
  --color-link: #FFFFFF; --color-focus: var(--color-gold); --color-selection: rgb(255 255 255 / 0.25);
  --color-blue: #8DB6FF; --color-tint-blue: rgb(255 255 255 / 0.10); --color-surface-2: rgb(255 255 255 / 0.06);
  position: relative; isolation: isolate; background: var(--color-band); color: var(--color-ink);
}
.section--blue { --color-ink-muted: #DCE7FB; --color-blue: #FFFFFF; --color-tint-blue: rgb(255 255 255 / 0.14); background: var(--blue-base); }
.section--navy a:not(.btn), .section--blue a:not(.btn) { text-decoration-color: rgb(255 255 255 / 0.5); }
/* white cards inside a dark band keep the light roles */
.on-light, .section--navy :is(.review, .program, .xlink, .form-card, .side, .faq-card),
.section--blue :is(.review, .program, .xlink, .form-card, .side, .faq-card) {
  --color-ink: var(--navy-base); --color-ink-muted: #4A5A78; --color-hairline: #DDE4EE; --color-link: var(--blue-base);
  --color-focus: var(--blue-base); --color-blue: var(--blue-base); --color-tint-blue: #E8F0FD; --color-surface-2: #E9EFF8;
  --color-card: #FFFFFF; --color-field: #FFFFFF; --color-on-blue: #FFFFFF; --color-border-input: #7A87A0; --color-tint-blue-press: #D3E2FB;
  color: var(--color-ink);
}
.section__head { display: grid; gap: var(--space-4); margin-bottom: clamp(var(--space-8), 3vw + 1rem, var(--space-12)); }

/* small helpers */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nobr { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: 8px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-canvas); font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus-visible { transform: none; outline-color: var(--color-gold); }

/* text at 200% (iOS/Android large text): long words break instead of pushing past the screen */
@media (max-width: 1023.98px) {
  h1, h2, h3, h4, p, li, dd, dt, blockquote, label, legend, summary { overflow-wrap: break-word; }
}

/* the few things that are pictures, not colours (the nav logo, the map): both versions in the markup, one shown per
   theme (the hidden one is lazy where it can be, so it is not fetched) */
.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: revert; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: revert; }
}