/* ============================================================================
   MinimalRank · Design system tokens (v2, 2026-07-19)
   Font de veritat del redisseny. Origen: handoff Claude Design
   (_design/design-brief-document/) recolorat per decisió de David:
   - Chrome MONOCROM (accent = tinta, botons negres, estil Peec).
   - Firma CORAL #F5563B NOMÉS a la dada (línia principal, barra "tú", motors).
   - Verd/warn/crit reservats als semàntics — mai com a marca.
   Les pantalles usen AQUESTES variables; cap color hardcodejat als HTML/JS nous.
   ========================================================================== */

/* ---- Fonts (self-hosted, variables) ------------------------------------ */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/fonts/spline-sans-mono.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens: tema clar (default) ---------------------------------------- */
:root {
  /* neutres freds */
  --mr-bg: #F2F3F6;
  --mr-sf: #FFFFFF;      /* superfície (cards) */
  --mr-sf2: #EAECF2;     /* superfície 2 (tracks, skeletons) */
  --mr-bd: #DBDEE7;      /* vores */
  --mr-ink: #14161D;
  --mr-ink2: #555B6B;
  --mr-ink3: #8B90A0;

  /* accent de CHROME = tinta (monocrom; botons negres, nav activa, focus) */
  --mr-ac: #14161D;
  --mr-ac-ink: #FFFFFF;  /* text sobre accent */
  --mr-acs: #EAECF2;     /* accent suau (fons nav activa) */

  /* firma de DADA = coral (només gràfics/mètriques "teves") */
  --mr-sig: #F5563B;
  --mr-sig-soft: #FCE4DE;

  /* semàntics (separats de marca i de firma) */
  --mr-good: #0E8A5F;  --mr-good-s: #DFF2EA;
  --mr-warn: #B27300;  --mr-warn-s: #F7EDD8;
  --mr-crit: #C43A3A;  --mr-crit-s: #F9E4E4;

  /* tipografia */
  --mr-display: 'Bricolage Grotesque', -apple-system, sans-serif;
  --mr-sans: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --mr-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* forma i moviment */
  --mr-r-card: 12px;
  --mr-r-ctrl: 8px;
  --mr-r-chip: 999px;
  --mr-shadow: 0 1px 2px rgba(20,22,29,.05), 0 10px 26px -14px rgba(20,22,29,.14);

  color-scheme: light;
}

/* ---- Tokens: tema fosc --------------------------------------------------- */
:root[data-theme="dark"] {
  --mr-bg: #0C0E14;
  --mr-sf: #141821;
  --mr-sf2: #1B2029;
  --mr-bd: #272D3A;
  --mr-ink: #EEEFF4;
  --mr-ink2: #9AA1B2;
  --mr-ink3: #676E80;

  /* en fosc el chrome monocrom s'inverteix: botons clars sobre fons fosc */
  --mr-ac: #EEEFF4;
  --mr-ac-ink: #0C0E14;
  --mr-acs: #1B2029;

  --mr-sig: #FF6B4F;      /* coral una mica més lluminós sobre fosc */
  --mr-sig-soft: #33201B;

  --mr-good: #4CC495;  --mr-good-s: #12291F;
  --mr-warn: #E0AC4A;  --mr-warn-s: #2C2410;
  --mr-crit: #E57373;  --mr-crit-s: #321616;

  --mr-shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.65);
  color-scheme: dark;
}

/* ---- Base --------------------------------------------------------------- */
.mr-app {
  background: var(--mr-bg);
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}
.mr-num { font-family: var(--mr-mono); font-variant-numeric: tabular-nums; }
.mr-display { font-family: var(--mr-display); letter-spacing: -0.02em; }

/* focus visible universal */
.mr-app :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mr-sig);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mr-app *, .mr-app *::before, .mr-app *::after {
    animation: none !important; transition: none !important;
  }
}

/* ---- Components bàsics --------------------------------------------------- */
/* Botons */
.mr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; border-radius: var(--mr-r-ctrl); padding: 10px 16px;
  font: 600 13.5px var(--mr-sans); cursor: pointer; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap; transition: .15s;
}
.mr-btn-pri { background: var(--mr-ac); color: var(--mr-ac-ink); }
.mr-btn-pri:hover { opacity: .88; }
.mr-btn-sec { background: var(--mr-sf); color: var(--mr-ink); border-color: var(--mr-bd); }
.mr-btn-sec:hover { border-color: var(--mr-ink3); }
.mr-btn-danger { background: none; color: var(--mr-crit); border-color: var(--mr-crit); }
.mr-btn-danger:hover { background: var(--mr-crit-s); }

/* Card */
.mr-card {
  background: var(--mr-sf); border: 1px solid var(--mr-bd);
  border-radius: var(--mr-r-card);
}

/* KPI */
.mr-kpi { padding: 15px 17px; }
.mr-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--mr-ink2); }
.mr-kpi-value { font-family: var(--mr-mono); font-variant-numeric: tabular-nums;
  font-size: 29px; font-weight: 600; margin-top: 5px; }
.mr-kpi-sub { font-size: 11.5px; color: var(--mr-ink3); margin-top: 2px; }

/* Badges (delta / estat) */
.mr-badge { border-radius: 6px; padding: 2px 8px;
  font: 600 11px var(--mr-mono); font-variant-numeric: tabular-nums; }
.mr-badge-good { background: var(--mr-good-s); color: var(--mr-good); }
.mr-badge-warn { background: var(--mr-warn-s); color: var(--mr-warn); }
.mr-badge-crit { background: var(--mr-crit-s); color: var(--mr-crit); }
.mr-badge-mute { background: var(--mr-sf2); color: var(--mr-ink2); }

/* Barres de cuota: la "teva" porta .mr-bar-you (coral), rivals gris */
.mr-bar { height: 8px; border-radius: 4px; background: var(--mr-sf2); overflow: hidden; }
.mr-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--mr-ink3); }
.mr-bar-you > i { background: var(--mr-sig); }

/* Capçaleres de taula */
.mr-th { font: 600 11px var(--mr-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--mr-ink3); }

/* Skeleton */
@keyframes mr-shimmer { 0%,100% { opacity:.55 } 50% { opacity:1 } }
.mr-skel { border-radius: 6px; background: var(--mr-sf2);
  animation: mr-shimmer 1.4s infinite; }

/* Toast */
.mr-toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: var(--mr-ink); color: var(--mr-bg);
  border-radius: 10px; padding: 13px 18px; font-size: 13.5px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}
.mr-toast .dot { width: 8px; height: 8px; border-radius: 50%; }
.mr-toast .dot-ok { background: #4CC495; }
.mr-toast .dot-err { background: #E57373; }

/* Estat buit amb acció */
.mr-empty {
  border: 1px dashed var(--mr-bd); border-radius: var(--mr-r-card);
  background: var(--mr-sf); padding: 26px; text-align: center;
}
.mr-empty h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.mr-empty p { font-size: 13px; color: var(--mr-ink2); margin: 0 0 14px; }

/* --- Ayuda contextual (mr-help.js): icono ? sin caja + popover --- */
.mr-help { -webkit-appearance: none; appearance: none; display: inline-flex;
  align-items: center; justify-content: center; vertical-align: middle;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0; padding: 0 0 0 5px; margin: 0; color: var(--mr-ink3);
  cursor: pointer; line-height: 0; }
.mr-help:hover { color: var(--mr-sig); }
.mr-help:focus, .mr-help:focus-visible { outline: none; }
.mr-help-pop { position: absolute; z-index: 70; max-width: 300px; background: var(--mr-bg);
  border: 1px solid var(--mr-bd); border-radius: 10px; padding: 12px 14px; box-shadow: var(--mr-shadow); }
.mr-help-title { font: 600 12.5px var(--mr-sans); margin-bottom: 4px; }
.mr-help-body { font-size: 12px; line-height: 1.5; color: var(--mr-ink2); }