:root {
  /* ──────────────────────────────────────────────────────
   SISTEMA DE TOKENS: Colors, Tipografia, Espaiats
   ────────────────────────────────────────────────────── */

  /* Colors base */
  --bg: #f7f7f7;
  --card: #fff;
  --ink: #1f2a37;
  --muted: #6b7280;
  --text-strong: #111827;
  --text-max: #000;
  --chip-text: #4b4b4b;

  /* Colors RGB per composició */
  --ink-rgb: 31, 42, 55;
  --shadow-rgb: 16, 24, 40;
  --backdrop-rgb: 17, 24, 39;
  --chip-icon-rgb: 75, 85, 99;
  --color-primary-rgb: 46, 109, 164;
  --color-accent-rgb: 28, 176, 246;
  /* Edició d’inputs: to blau fred (contrast amb el lavat rosat de repòs, --actionable-wash) */
  --color-form-focus-rgb: 62, 128, 205;
  --input-focus-bg: color-mix(in srgb, rgb(var(--color-form-focus-rgb)) 11%, #fff);
  --input-focus-border: rgba(var(--color-form-focus-rgb), 0.64);

  /* Colors temàtics esdeveniments (RGB base) */
  --color-ballada-rgb: 15, 118, 110;
  --color-curset-rgb: 109, 40, 217;
  --color-concert-rgb: 29, 78, 216;
  --color-concurs-rgb: 159, 18, 57;
  --color-aplec-rgb: 180, 83, 9;
  /* Miscel·laris: magenta fúcsia (saturació alineada amb la resta; el gris ardesia anterior s’empal·lava amb Concurs/ink) */
  --color-altres-rgb: 176, 38, 148;

  /* Catàleg · Discografia: 2 tipus extra (6 primers reutilitzen la paleta d’agenda al CSS) */
  --color-suport-78-rgb: 132, 61, 14;
  --color-suport-pedra-rgb: 55, 102, 127;

  /* Colors semàntics */
  --color-primary: #2e6da4;
  /* Derivat del primari: un to més fosc (mateix croma aprox. en canviar de paleta,
     p.ex. granat → blavós). Ajusta només 75% / 25% si cal més o menys contrast. */
  --color-primary-strong: color-mix(in srgb, var(--color-primary) 75%, #000 25%);
  /* Primari al 70% mesclat amb card (sòlid; evita solapaments semi-transparents) */
  --color-primary-solid-70: color-mix(
    in srgb,
    var(--color-primary) 70%,
    var(--card)
  );
  --chip-main: var(--color-primary);

  /* ──────────────────────────────────────────────────────
   ESCALA D'OPACITATS (Model Base-10 consolidat)
   ────────────────────────────────────────────────────── */
  --opacity-05: 0.05; /* 5%  — lavat ultra subtil */
  --opacity-10: 0.1; /* 10% — tint, hover subtil */
  --opacity-15: 0.15; /* 15% — línies, vores lleugeres */
  --opacity-20: 0.2; /* 20% — vores, separadors */
  --opacity-30: 0.3; /* 30% — desactivat, attenuat */
  --opacity-40: 0.4; /* 40% — overlay mitjà */
  --opacity-50: 0.5; /* 50% — semi-transparent */
  --opacity-60: 0.6; /* 60% — vora de modal */
  --opacity-70: 0.7; /* 70% — overlay fort */
  --opacity-80: 0.8; /* 80% — gairebé sòlid */
  --opacity-90: 0.9; /* 90% — gairebé opac */

  /* Colors derivats sobre blanc (opacs; color-mix garanteix resultat consistent en qualsevol context) */
  --actionable-wash: color-mix(in srgb, rgb(var(--color-primary-rgb)) 5%, #fff);
  --actionable-hover: color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, #fff);
  /* Lavat primari més intens: estat actiu de la barra Tiratge/Autor/Cobla/Detalls (programa.css)
   * que serveix de model per als controls secundaris fora del sidebar (controls.css). */
  --actionable-active: color-mix(in srgb, rgb(var(--color-primary-rgb)) 16%, var(--card));
  /* Llistes desplegables de filtres (opció amb hover): 30% primari sobre fons de targeta */
  --filter-option-hover-bg: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 30%,
    var(--card)
  );
  /* Megamenú desktop: panell i opcions (mescla amb blanc; no alteren --bg / --card globals) */
  --mm-panel-bg: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 6%,
    #fff
  );
  --mm-option-hover-bg: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 30%,
    #fff
  );
  /* Colors derivats semi-transparents (per a borders i separadors on la transparència és intencional) */
  --actionable-line: rgba(var(--color-primary-rgb), var(--opacity-15));
  --actionable-border: rgba(var(--color-primary-rgb), var(--opacity-30));
  --line: rgba(var(--ink-rgb), var(--opacity-10));
  --line-strong: rgba(var(--ink-rgb), var(--opacity-10));
  /* Placeholders d'inputs: més fluix que el text escrit (--text-strong / --muted) */
  --color-placeholder: rgba(var(--ink-rgb), 0.38);
  /* Icona ✓ verda del desplegable booleà tri-estat (Sí/No/Qualsevol) */
  --color-bool-true: #27ae60;
  --line-invert: rgba(255, 255, 255, var(--opacity-20));

  --ui-overlay-subtle: rgba(0, 0, 0, var(--opacity-05));
  --ui-overlay-hover: rgba(0, 0, 0, var(--opacity-10));
  --ui-scrim: rgba(0, 0, 0, var(--opacity-40));

  --drawer-item-open-bg: rgba(
    var(--color-primary-rgb),
    var(--opacity-05)
  );
  --drawer-divider: rgba(var(--color-primary-rgb), var(--opacity-20));
  --drawer-divider-strong: rgba(
    var(--color-primary-rgb),
    var(--opacity-30)
  );

  --chip-bg: rgba(255, 255, 255, var(--opacity-90));
  --logo-ring: rgba(255, 255, 255, var(--opacity-70));
  --modal-border: rgba(255, 255, 255, var(--opacity-60));
  --calendar-day-muted-bg: rgba(255, 255, 255, var(--opacity-50));
  /* Graell mensual: vora de dies no seleccionats = mateixa intensitat que el fons del nivell 5 (38%) */
  --calendar-grid-day-border: rgba(var(--color-primary-rgb), 0.38);
  /* Hover del grid (contrast amb la vora de selecció en primari) */
  --calendar-day-hover-border: #b26477;

  /* Colors simples (sense necessitat d'opacitat variable) */
  --border-subtle: #e5e5e5;
  --border-divider-soft: #f0f0f0;
  --border-strong: #bfbfbf;
  --border-footer-panel: #c8c8c8;
  --surface-submenu: #f9fafb;
  --surface-footer: #d8d8d8;
  --surface-footer-panel: #e8e8e8;

  --drawer-bg: #fff;
  --drawer-header-bg: #fff;
  --drawer-submenu-bg: #fff;
  --drawer-item-hover: var(--color-primary-strong);
  --drawer-accent: var(--color-primary-strong);

  /* Colors d'accent per als buckets de tags de la videoteca.
   * Usats als summary de l'acordió (icona + badge) i als chips actius.
   * Format: un color pur que es llegeix bé sobre blanc i sobre washes suaus. */
  --bucket-generes-accent:     #7c5230;   /* marró fusta / instrument i gènere */
  --bucket-generes-wash:       #faf3ec;
  /* Teal: contrasta amb lila, verd, terracota i marró. */
  --bucket-cobles-accent:      #0f766e;
  --bucket-cobles-wash:        #ccfbf1;
  /* Índigo: es separa del lila «persones» i del teal «cobles». */
  --bucket-altres-formacions-accent: #3730a3;
  --bucket-altres-formacions-wash:   #e0e7ff;
  /* Lila (bucket «Persones»): prou contrast sobre blanc; diferent del blau primari. */
  --bucket-persones-accent:   #6f59a3;
  --bucket-persones-wash:     #f3effb;
  /* Roig cremós: diferencia «colles» (ball) de cobles («orquestra») i verd d’«actes». */
  --bucket-colles-accent:      #ae1f3d;
  --bucket-colles-wash:        #fde8ec;
  /* Coure calent: bucket instruments de vent sense repetir teal ni terracota. */
  --bucket-instruments-accent: #b45309;
  --bucket-instruments-wash:    #fff7ed;
  --bucket-actes-i-contextos-accent: #2a7a46; /* verd */
  --bucket-actes-i-contextos-wash:   #edf7f1;
  --bucket-llocs-i-poblacions-accent: #b84c1a;   /* terracota */
  --bucket-llocs-i-poblacions-wash:   #fdf1ec;

  /* ──────────────────────────────────────────────────────
   ESCALA DE RADIUS (Consolidada)
   ────────────────────────────────────────────────────── */
  --radius-xs: 2px; /* Punts, micro-elements */
  --radius-chip: 6px; /* Etiquetes de filtre (tags persones), menys arrodonides que --radius-lg */
  --radius-sm: 10px; /* Barres de desplaçament, distintius */
  --radius-md: 12px; /* Controls, selects, enllaços megamenu */
  --radius-lg: 13px; /* Botons, nav, chips (ESTÀNDARD) */
  --radius-xl: 14px; /* Cards, modals */
  --radius-2xl: 18px; /* Contenidors principals */
  --radius-full: 999px; /* Pastilles circulars */

  /* ──────────────────────────────────────────────────────
   ESCALA DE SPACING (Base 4px - Consolidada i optimitzada)
   ────────────────────────────────────────────────────── */
  --space-1: 4px; /* xs — compact, ítems de navegació, llistes */
  --space-1h: 6px; /* Excepció justificada: graella de calendari (raó visual) */
  --space-2: 8px; /* sm — estret, flexbox estàndard */
  --space-3: 12px; /* md — normal, seccions, grups */
  --space-4: 16px; /* lg — còmode, graells */
  --space-5: 20px; /* xl — espaiós, megamenu */

  /* Sidebar drawer (≤980px): marge superior de la primera card respecte al chrome; desktop no s’usa */
  --sidebar-filters-content-inset-top: var(--space-3);

  /* ──────────────────────────────────────────────────────
   TIPOGRAFIA
   ────────────────────────────────────────────────────── */
  --font-body:
    Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-ui: Nunito, Inter, system-ui, sans-serif;
  /* Taules de resultats (v5 · Taules BD / cel·les amb data-font-stack): mateixa pila que v5.sardamania.cat */
  --font-taules-condensed:
    'Roboto Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
    sans-serif;

  /* Escala de font-sizes (consolidada) */
  --font-xs: 10px; /* Meta-informació, etiquetes */
  --font-sm: 12px; /* Capçaleres de calendari, majúscules */
  --font-base: 13px; /* Capçaleres de secció */
  /* Pas entre md (14px) i sm (12px), p. ex. primera línia taula programa en mòbil estret */
  --font-md-sm: 13px;
  --font-md: 14px; /* Entrades, formularis */
  --font-lg: 15px; /* Nav principal */
  --font-xl: 16px; /* Text de cos */
  --font-2xl: 18px; /* Títols */
  --font-3xl: 27px; /* Brand */
  --font-4xl: 35px; /* Brand principal (topbar) */

  /* ──────────────────────────────────────────────────────
   EFECTES VISUALS
   ────────────────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-soft: 0 6px 16px rgba(var(--shadow-rgb), var(--opacity-10));
  /* Player global fixe al peu: ombra cap amunt («damunt» del web; z-index > bottom-bar). */
  --shadow-viewport-foot-up: 0 -6px 20px rgba(var(--shadow-rgb), var(--opacity-15));
  --focus: 0 0 0 4px rgba(var(--color-accent-rgb), var(--opacity-20));
}

:root {
  --ctrl-shadow-rest: 0 1px 2px rgba(var(--shadow-rgb), var(--opacity-10));
  --ctrl-shadow-hover: 0 6px 14px
    rgba(var(--shadow-rgb), var(--opacity-15));
  --ctrl-shadow-active: 0 1px 2px
    rgba(var(--shadow-rgb), var(--opacity-10));
  --ctrl-scale-active: 0.95;
}

:root {
  --ctrl-scale-hover: 1.08;
  --ctrl-transition:
    transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease,
    background 0.12s ease;
}

/* Controls unificats (referència visual: segments mes/any i .button-bar segmentada) */
:root {
  --ctrl-pad-y: 10px;
  --ctrl-pad-x: 12px;
  --ctrl-min-height: 42px;
  --ctrl-font-size: var(--font-lg);
  --ctrl-font-weight: 900;
  --ctrl-radius: var(--radius-xl);
  --ctrl-letter-spacing: 0.2px;
  /*
   * Chips (.chip), filtres actius (.active-filter-chip), tags (.filter-tag-chip), etc.
   * A ≥981px s’amplia tot un 15%; ≤980px roman 1 (sense canvi visual).
   */
  --chips-desktop-scale: 1;
}

@media (min-width: 981px) {
  :root {
    --chips-desktop-scale: 1.15;
  }
}

@media (max-width: 980px) {
  :root {
    --ctrl-min-height: 44px;
  }
}

@media (max-width: 520px) {
  :root {
    --bottom-bar-h: 88px;
  }
}