/* ============================================================
MotoGP Data — base.css
------------------------------------------------------------
Reset + estils base d'element + helpers de rol, sobre els
design tokens de tokens.css (carrega tokens.css PRIMER).
FONTS — el carregador viu a la plantilla de pàgina, no aquí
(evita un @import render-blocking). Al de la base:
Producció (recomanat): auto-hostatjar. Deixa els woff2 a
/assets/fonts i afegeix un @font-face per família apuntant-hi;
després treu els de Google. (Inter, Space Grotesk i
Space Mono cobreixen Latin Extended → ç i l·l catalanes.)
Sense les fonts, tot cau a system-ui (degradació neta).
============================================================ */
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--surface-base);
color: var(--text-primary);
font-family: var(--font-text);
font-size: var(--fs-15);
line-height: var(--lh-relaxed);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection { background: var(--neutral-900); color: var(--neutral-50); }
img, svg, video, canvas { display: block; max-width: 100%; }
/* ---- Enllaços ---- */
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
/* ---- Focus visible (anella blava, sense outline per defecte) ---- */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* ---- Titulars (display amb tracking negatiu; regular per defecte) ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--text-primary); }
h1 { font-size: var(--fs-36); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-24); }
h3 { font-size: var(--fs-18); }
p { max-width: var(--container-text); }
/* ---- Codi ---- */
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
pre { background: var(--surface-sunken); padding: var(--sp-4); border-radius: var(--r-2); overflow: auto; }
/* ============================================================
HELPERS DE ROL (deriven de les 5 regles fundacionals)
============================================================ */
/* Regla 2 — Cifras tabulars en TOT el numèric. Posa .num a
qualsevol valor/eix/cel·la de dades. */
.num, table td, table th, [data-num] {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: var(--num-tabular);
}
/* Superfícies (Regla 5 — elevació per to + aire, no ombra) */
.surface-raised { background: var(--surface-raised); }
.surface-sunken { background: var(--surface-sunken); }
.surface-inset { background: var(--surface-inset); }
/* Targeta: blanc pur que destaca sobre el base, sense vora ni ombra */
.card { background: var(--surface-raised); border-radius: var(--r-2); padding: var(--sp-6); }
/* Eyebrow / etiqueta en versaletes (§ de l'style guide) */
.eyebrow { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-muted); }
/* Regla 4 — el caveat és ESTRUCTURAL i visible, part de la fitxa.
Mai lletra petita amagada: to secundari, separat per una hairline. */
.caveat { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--text-secondary); border-top: 1px solid var(--rule); padding-top: var(--sp-3); margin-top: var(--sp-4); }
/* Línia de font sota un gràfic/taula */
.source { font-size: var(--fs-12); color: var(--text-faint); }
/* Regla 3 — l'ESTIMAT es distingeix de l'OBSERVAT per TRACTAMENT,
no per color (mateix blau, distinta textura). Aplica .is-estimated
a barres/marcadors/files de dades pronosticades o derivades. */
.is-estimated { opacity: 0.55; }
.is-estimated--outline { background: transparent !important; border: 1px dashed var(--border-strong); }
/* Chips d'estat (radi pill) */
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-12); font-weight: var(--fw-medium); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-secondary); }
/* Èmfasi ambre (Regla 1 — el color no codifica seccions; l'ambre
és NOMÉS èmfasi/atenció puntual). */
.accent { color: var(--accent-text); }
.accent-wash { background: var(--accent-surface); }
/* ---- Contenidors ---- */
.container { max-width: var(--container-base); margin-inline: auto; padding-inline: var(--sp-5); }
.container-text { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--sp-5); }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--sp-5); }
/* ---- Botó primari (blau) i secundari (hairline) ---- */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--fw-medium) var(--fs-14)/1 var(--font-text); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-1); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--blue-600); color: var(--text-on-blue); }
.btn-primary:hover { background: var(--blue-700); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { border-color: var(--border-strong); }
/* ---- Taula base (cabecera enfonsada, hairlines) ---- */
table { border-collapse: collapse; width: 100%; line-height: var(--lh-data); }
thead th { background: var(--surface-sunken); text-align: left; font-weight: var(--fw-semibold); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tr-caps-sm); color: var(--text-muted); }
th, td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--rule); }
/* ---- Moviment reduït ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}