/*
 * RED VECINAL — Base: tipografía, mapeo de Bootstrap a tokens y elementos.
 * Colores y medidas SOLO desde tokens.css (skill redvecinal-ui).
 */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.e8da57bc0c3d.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-600-normal.9204a77cef78.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-700-normal.617b4197a93a.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-800-normal.33e422379273.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --bs-body-font-family: var(--rv-font-sans);
  --bs-body-font-size: var(--rv-text-base);
  --bs-body-line-height: var(--rv-leading);
  --bs-body-color: var(--rv-text);
  --bs-body-bg: var(--rv-canvas);
  --bs-primary: var(--rv-blue-strong);
  --bs-primary-rgb: 26, 86, 201;
  --bs-success: var(--rv-success);
  --bs-danger: var(--rv-danger);
  --bs-link-color: var(--rv-blue-strong);
  --bs-link-color-rgb: 26, 86, 201;
  --bs-link-hover-color: var(--rv-blue-hover);
  --bs-link-hover-color-rgb: 21, 74, 174;
  --bs-border-color: var(--rv-border);
  --bs-border-radius: var(--rv-radius-sm);
  --bs-heading-color: var(--rv-navy);
  --bs-secondary-color: var(--rv-text-secondary);
  --bs-focus-ring-color: rgba(26, 86, 201, 0.5);
}

html { font-size: 100%; scroll-padding-top: var(--rv-space-8); scroll-padding-bottom: calc(var(--rv-bottom-nav-height) + var(--rv-space-4)); }
body {
  font-family: var(--rv-font-sans);
  font-size: var(--rv-text-base);
  line-height: var(--rv-leading);
  color: var(--rv-text);
  background: var(--rv-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--rv-navy); line-height: var(--rv-leading-tight); font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: var(--rv-text-3xl); margin-bottom: var(--rv-space-3); }
h2 { font-size: var(--rv-text-2xl); margin-bottom: var(--rv-space-3); }
h3 { font-size: var(--rv-text-xl); font-weight: 700; margin-bottom: var(--rv-space-2); }
p { max-width: var(--rv-measure); }
a { color: var(--rv-blue-strong); text-underline-offset: 0.2em; }
a:hover { color: var(--rv-blue-hover); }
strong { font-weight: 700; }
small, .rv-small { font-size: var(--rv-text-sm); }

:focus-visible { outline: 3px solid var(--rv-focus); outline-offset: 3px; }
.rv-on-dark :focus-visible, .rv-on-dark:focus-visible { outline-color: var(--rv-focus-on-dark); }

.rv-icon { width: 1.25em; height: 1.25em; fill: currentColor; flex-shrink: 0; vertical-align: -0.2em; }
.rv-icon-lg { width: 1.75rem; height: 1.75rem; fill: currentColor; flex-shrink: 0; }

.rv-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.rv-skip-link {
  position: absolute; left: var(--rv-space-4); top: -200px; z-index: 2000;
  background: var(--rv-blue-strong); color: var(--rv-white);
  padding: var(--rv-space-3) var(--rv-space-5); border-radius: var(--rv-radius-sm); font-weight: 700;
}
.rv-skip-link:focus { top: var(--rv-space-3); color: var(--rv-white); }

.rv-ribbon {
  background: var(--rv-warning-accent); color: var(--rv-navy);
  font-weight: 700; font-size: var(--rv-text-sm); text-align: center;
  padding: var(--rv-space-1) var(--rv-space-4);
}

@media (prefers-contrast: more) {
  :root { --rv-border: var(--rv-border-strong); --rv-text-muted: var(--rv-text-secondary); }
}