/* =============================================================================
   GeoVerio Design System — base.css
   Version 1.0.0 · "Ember"
   -----------------------------------------------------------------------------
   Reset, document defaults, type primitives and layout primitives.
   References ONLY --gv-* semantic tokens. Zero literals.
   Load after tokens.css.
   ============================================================================= */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky headers must not cover the anchor they scrolled to. */
  scroll-padding-top: calc(var(--gv-space-16) + var(--gv-space-4));
}

body {
  min-height: 100vh;
  background: var(--gv-bg);
  color: var(--gv-fg);
  font-family: var(--gv-font-sans);
  font-size: var(--gv-text-base);
  line-height: var(--gv-leading-base);
  letter-spacing: var(--gv-tracking-snug);
  font-synthesis-weight: none;   /* fail loudly rather than fake a missing weight */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

::selection { background: var(--gv-selection-bg); color: var(--gv-selection-fg); }

/* --- Focus ----------------------------------------------------------------
   ONE rule. There is no `outline: none` anywhere in this system that is not
   immediately replaced on the same selector. A control without a visible focus
   state is a defect, not a style choice. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--gv-focus-ring);
  border-radius: var(--gv-radius-md);
  position: relative;
  z-index: var(--gv-z-docked);
}
/* Components that re-declare box-shadow MUST re-declare the ring too. This
   utility exists so they can do it in one token. */
.gv-ring { box-shadow: var(--gv-focus-ring) !important; }

/* --- Skip link ------------------------------------------------------------ */
.gv-skip {
  position: absolute; left: var(--gv-space-4); top: calc(-1 * var(--gv-space-16));
  z-index: var(--gv-z-tooltip);
  padding: var(--gv-space-2) var(--gv-space-4);
  background: var(--gv-fg); color: var(--gv-fg-inverse);
  border-radius: var(--gv-radius-md);
  font-size: var(--gv-text-md); font-weight: var(--gv-weight-medium);
  text-decoration: none;
  transition: top var(--gv-duration-fast) var(--gv-ease-standard);
}
.gv-skip:focus-visible { top: var(--gv-space-3); }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-weight: var(--gv-weight-semibold); letter-spacing: var(--gv-tracking-tight); }
h1 { font-size: var(--gv-text-4xl); line-height: var(--gv-leading-4xl); }
h2 { font-size: var(--gv-text-3xl); line-height: var(--gv-leading-3xl); }
h3 { font-size: var(--gv-text-2xl); line-height: var(--gv-leading-2xl); }
h4 { font-size: var(--gv-text-xl);  line-height: var(--gv-leading-xl); }
h5 { font-size: var(--gv-text-lg);  line-height: var(--gv-leading-lg); letter-spacing: var(--gv-tracking-snug); }
h6 { font-size: var(--gv-text-md);  line-height: var(--gv-leading-md); letter-spacing: var(--gv-tracking-snug); }

a { color: var(--gv-accent-ink); text-decoration-color: color-mix(in srgb, var(--gv-accent-ink) 35%, transparent); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

/* Display type — Atlas V2: Geist at the wordmark weight. (The V2 override at the
   end of the theme layer sets weight/style; these classes keep their hooks.
   Use it for exactly one phrase per page, inside a heading. Never for body. */
.gv-display { font-family: var(--gv-font-display); font-weight: var(--gv-weight-regular); letter-spacing: var(--gv-tracking-none); }
.gv-display-em { font-family: var(--gv-font-display); font-style: italic; font-weight: var(--gv-weight-regular); color: var(--gv-accent); letter-spacing: var(--gv-tracking-none); }

.gv-overline {
  font-family: var(--gv-font-mono);
  font-size: var(--gv-text-2xs); line-height: var(--gv-leading-2xs);
  font-weight: var(--gv-weight-medium);
  letter-spacing: var(--gv-tracking-wide); text-transform: uppercase;
  color: var(--gv-accent-ink);
}
.gv-lede { font-size: var(--gv-text-lg); line-height: var(--gv-leading-lg); color: var(--gv-fg-secondary); max-width: var(--gv-measure); }
.gv-prose { max-width: var(--gv-measure); }
.gv-prose > * + * { margin-top: var(--gv-space-4); }
.gv-prose h2 { margin-top: var(--gv-space-10); }
.gv-prose h3 { margin-top: var(--gv-space-8); }

.gv-text-secondary { color: var(--gv-fg-secondary); }
.gv-text-muted { color: var(--gv-fg-muted); }
.gv-text-danger { color: var(--gv-danger-ink); }
.gv-mono { font-family: var(--gv-font-mono); font-size: 0.92em; }

/* --- Layout --------------------------------------------------------------- */
.gv-container { width: 100%; max-width: var(--gv-container); margin-inline: auto; padding-inline: var(--gv-gutter); }
.gv-container--narrow { max-width: var(--gv-container-narrow); }
.gv-container--wide { max-width: var(--gv-container-wide); }
.gv-section { padding-block: var(--gv-section-y); }
.gv-section--lg { padding-block: var(--gv-section-y-lg); }
.gv-stack { display: flex; flex-direction: column; gap: var(--gv-space-4); }
.gv-row { display: flex; align-items: center; gap: var(--gv-space-3); flex-wrap: wrap; }
.gv-grid { display: grid; gap: var(--gv-space-4); }
.gv-divider { height: var(--gv-border-width); background: var(--gv-border); border: none; }

/* --- Icons ----------------------------------------------------------------
   One stroke weight on a 24 viewBox. `--gv-icon-stroke-dense` is applied only
   at 12–14px, where 1.75 optically disappears. */
.gv-icon {
  width: var(--gv-icon-sm); height: var(--gv-icon-sm);
  stroke: currentColor; stroke-width: var(--gv-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.gv-icon--2xs { width: var(--gv-icon-2xs); height: var(--gv-icon-2xs); stroke-width: var(--gv-icon-stroke-dense); }
.gv-icon--xs  { width: var(--gv-icon-xs);  height: var(--gv-icon-xs);  stroke-width: var(--gv-icon-stroke-dense); }
.gv-icon--sm  { width: var(--gv-icon-sm);  height: var(--gv-icon-sm); }
.gv-icon--md  { width: var(--gv-icon-md);  height: var(--gv-icon-md); }
.gv-icon--lg  { width: var(--gv-icon-lg);  height: var(--gv-icon-lg); }
.gv-icon--xl  { width: var(--gv-icon-xl);  height: var(--gv-icon-xl); }

/* --- Accessibility utilities ---------------------------------------------- */
.gv-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Any element that hides a control off-screen MUST also remove it from the tab
   order. Use this, never a bare transform. */
.gv-offscreen { visibility: hidden; }