/* GPX Weather Ride: base común a la portada y a la app.
 * Tipografía: Barlow Condensed (cifras y títulos) y Barlow (texto), servidas desde /vendor/fonts.
 * Color: la paleta del viento (contra, a favor, lateral, calma) es el único color fuerte.
 */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../vendor/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('../vendor/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../vendor/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('../vendor/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('../vendor/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('../vendor/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
  --paper: #eef1f0;
  --surface: #ffffff;
  --ink: #1d2b36;
  --muted: #5b6b77;
  --line: #d6dde1;
  --line-strong: #b7c2c9;
  --focus: #2b6cb0;

  --head: #c23b30;
  --tail: #22875a;
  --cross: #c98f0e;
  --calm: #8a9aa6;
  --unknown: #c7cfd4;

  --font-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-figure: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;

  --panel-w: 400px;
  --profile-h: 168px;
  --r-sm: 4px;
  --r-md: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0f171d;
    --surface: #16212a;
    --ink: #e5ebee;
    --muted: #96a6b1;
    --line: #26343f;
    --line-strong: #3a4a56;
    --focus: #6ea8e8;
    --head: #e2574b;
    --tail: #3bb37b;
    --cross: #e3aa2b;
    --calm: #7d8f9c;
    --unknown: #3a4853;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ul { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.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;
}

/* --- Aviso de preproducción --- */
.pre-banner {
  background: #f1c40f;
  color: #1d2b36;
  font: 600 14px/1 var(--font-figure);
  text-align: center;
  padding: 5px 16px 4px;
  border-bottom: 4px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #1d2b36 0 8px, #f1c40f 8px 16px) 4;
}

/* --- Colores del viento: .c-head, .c-tail… definen --c para sus hijos --- */
.c-head { --c: var(--head); }
.c-tail { --c: var(--tail); }
.c-cross { --c: var(--cross); }
.c-calm { --c: var(--calm); }
.c-unknown { --c: var(--unknown); }