/* ════════════════════════════════════════════
   TOKENS — Variables, tema i reset global
   AvalMap · styles/tokens.css
   ════════════════════════════════════════════ */

/* ── TEMA FOSC (per defecte) ── */
:root {
  --base-fs: 13px;

  /* Superfícies — slate fosc professional */
  --bg:  #1a1d27;
  --s1:  #20243a;
  --s2:  #252940;
  --s3:  #2c3050;
  --s4:  #333860;

  /* Vores — més visibles */
  --b1:  #333860;
  --b2:  #404878;

  /* Qualificacions — més saturades per llegibilitat */
  --ae:    #34d399; --ae-bg: #0d2e22; --ae-b: #1a5c3e;
  --an:    #60a5fa; --an-bg: #0d2040; --an-b: #1e3d7a;
  --as:    #fbbf24; --as-bg: #2d1f08; --as-b: #5a3d10;
  --na:    #f87171; --na-bg: #2d0f0f; --na-b: #5c1e1e;

  /* Accent */
  --gold:   #f5a623;
  --teal:   #2dd4bf;
  --purple: #a78bfa;

  /* Text — millor jerarquia i contrast */
  --txt:  #e2e8f0;
  --txt2: #a8b4cc;
  --txt3: #6b7a99;

  /* Tipografia */
  --fh: 'Barlow Condensed', sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --fb: 'IBM Plex Sans', sans-serif;

  /* Radis */
  --r:  6px;
  --r2: 10px;
}

/* ── TEMA CLAR ── */
html.light {
  --bg:  #f0f2f5;
  --s1:  #ffffff;
  --s2:  #f5f6fa;
  --s3:  #eaecf4;
  --s4:  #dde0ee;

  --b1:  #d0d5e8;
  --b2:  #b0b8d8;

  --ae:    #1a8a5a; --ae-bg: #d4f5e4; --ae-b: #a8e6c8;
  --an:    #1a56c8; --an-bg: #daeaf8; --an-b: #a8ccf0;
  --as:    #b05010; --as-bg: #fde8cc; --as-b: #f8c890;
  --na:    #c02020; --na-bg: #fde0e0; --na-b: #f8a0a0;

  --gold:   #c07800;
  --teal:   #0a9080;
  --purple: #6040c0;

  --txt:  #1a2038;
  --txt2: #404868;
  --txt3: #7080a0;
}

/* ── ESCALAT DE LLETRA ── */
html[data-fs="sm"] { font-size: 12px }
html[data-fs="md"] { font-size: 14px }
html[data-fs="lg"] { font-size: 15.5px }
html[data-fs="xl"] { font-size: 17px }

/* ── RESET GLOBAL ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* html i body ocupen exactament el viewport — sense scroll extern.
   Cada panell gestiona el seu propi scroll intern.
   Necessari perquè l'app carregui els panells via fetch() i no
   desbordí el document més enllà de la pantalla. */
html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--fb);
  background: var(--bg);
  color: var(--txt);
  font-size: var(--base-fs, 13px);
}

input, select, textarea, button {
  font-family: inherit;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar         { width: 5px; height: 5px }
::-webkit-scrollbar-track   { background: var(--bg) }
::-webkit-scrollbar-thumb   { background: var(--b2); border-radius: 3px }