: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;
  /* Primari verd fosc (#276749); accent menta per focus/gradient */
  --color-primary-rgb: 39, 103, 73;
  --color-accent-rgb: 82, 196, 168;
  /* Edició d’inputs: to blau fred (contrast amb el lavat verdós 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: 159, 18, 57;
  --color-concert-rgb: 109, 40, 217;
  --color-concurs-rgb: 29, 78, 216;
  --color-aplec-rgb: 180, 83, 9;
  --color-altres-rgb: 51, 65, 85;

  /* Colors semàntics */
  --color-primary: #276749;
  /* Variant fosca del primari: text sobre clar, fons de botons, vores, focus (vegeu ús al grep de --color-primary-strong) */
  --color-primary-strong: color-mix(in srgb, var(--color-primary) 64%, #000);
  /* Barreja 70% primari + blanc: fons (hover barra de navegació) */
  --color-primary-70: color-mix(in srgb, rgb(var(--color-primary-rgb)) 70%, var(--card));
  --chip-main: var(--color-primary);
  /* Valors booleans a taules de resultats (tick / creu) */
  --color-bool-true: #15803d;
  --color-bool-false: #b91c1c;
  /* Ressaltat groc per a la part «actius /» als badges de taules (nav / drawer)
     quan el filtre redueix el recompte. Llegible sobre el fons verd del badge. */
  --color-count-active: #facc15;

  /* ──────────────────────────────────────────────────────
   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);
  /* Megamenú: fons molt clar (tint primari) + hover d’enllaç ben marcat */
  --megamenu-panel-bg: color-mix(in srgb, rgb(var(--color-primary-rgb)) 6%, #fff);
  --megamenu-link-hover-bg: color-mix(in srgb, rgb(var(--color-primary-rgb)) 30%, #fff);
  /* 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)
  );
  /* 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));
  /* Fons alternat a taules de resultats (zebra); sobre --card */
  --table-row-alt: color-mix(in srgb, rgb(var(--ink-rgb)) 4%, var(--card));
  /* Hover de fila: tint primari perceptible (no igual que la zebra) */
  --table-row-hover: color-mix(in srgb, rgb(var(--color-primary-rgb)) 11%, var(--card));
  --table-row-hover-alt: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 12%,
    var(--table-row-alt)
  );
  /* Placeholders d'inputs: més fluix que el text escrit (--text-strong / --muted) */
  --color-placeholder: rgba(var(--ink-rgb), 0.38);
  --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));
  --modal-border: rgba(255, 255, 255, var(--opacity-60));
  --calendar-day-muted-bg: rgba(255, 255, 255, var(--opacity-50));

  /* 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);

  /* ──────────────────────────────────────────────────────
   ESCALA DE RADIUS (Consolidada)
   ────────────────────────────────────────────────────── */
  --radius-xs: 2px; /* Punts, micro-elements */
  --radius-chip: 6px; /* Etiquetes de filtre (tags autors), 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 */

  /* ──────────────────────────────────────────────────────
   BREAKPOINTS (reutilitzar a @media abans d’inventar literals)
   ────────────────────────────────────────────────────── */
  /* Taules BD: sota aquest ample les <col> no forcen amplada (table-layout auto, com abans) */
  --breakpoint-taules-fluid: 1630px;

  /* Sidebar drawer (≤1400px): marge superior de la primera card respecte al chrome; desktop no s’usa.
     Mateix valor que v4 (`var(--space-3)`); el primer card pot solapar el botó Tancar (comportament volgut). */
  --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 BD (sardanes, persones, …): carregada via Google Fonts a index.php */
  --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ó */
  --font-md: 14px; /* Entrades, formularis */
  --font-lg: 15px; /* Nav principal */
  --font-xl: 16px; /* Text de cos */
  --font-2xl: 18px; /* Títols */
  /** Títol de la fila d’intenció (breadcrumb) a la card de resultats: taules BD i pàgines de contingut. Mateixa mida; preferim rem per alinear amb 1.125rem. */
  --font-results-card-title: 1.125rem;
  --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));
  --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;
}

/* Només lectors de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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