/* tokens.css — variables CSS estructurals compartides
 *
 * Conté NOMÉS vars que són comunes als projectes (escala de grises, mides,
 * radis). Les vars de marca (color primari, accents) viuen al `:root` inline
 * de cada projecte perquè varien massa.
 *
 * Light mode: a :root.
 * Dark mode: html.dark sobreescriu les que canvien.
 *
 * Convenció:
 *   --bg, --bg-soft         fons (principal i secundari)
 *   --bg-elevated           fons d'elements flotants (modals, popovers, toasts).
 *                           Light mode = --bg. Dark mode: lleugerament més clar
 *                           que --bg per separar visualment el modal del fons
 *                           del document (problema típic en dark UI on modal i
 *                           body comparteixen color → no es veu on comença).
 *                           Convenció Material 3 (tonal elevation) i Apple HIG.
 *   --ink, --ink-2/3/4      escala de text (jeràrquica per protagonisme)
 *   --border, --border-2    separadors (subtil i marcat)
 *   --gap, --radius         espaiat i corner radius base
 *   --nav-h                 alçada navbar sticky
 */

:root {
  /* Estructurals */
  --nav-h: 54px;
  --gap: 4px;
  --radius: 6px;

  /* Escala de fons */
  --bg:          #ffffff;
  --bg-soft:     #FAFAFA;
  --bg-elevated: #ffffff;          /* light: igual a --bg */

  /* Escala de text (1=protagonista, 4=auxiliar) */
  --ink:   #0a0a0a;
  --ink-2: #404040;
  --ink-3: #737373;
  --ink-4: #a3a3a3;

  /* Separadors */
  --border:   #e5e5e5;
  --border-2: #d4d4d4;

  /* Color de text per a fons SEMPRE clars (per ex. el groc senyera de la
     marca, que es manté igual en dark mode). Si fessis servir --ink aquí,
     a dark mode el text es tornaria clar i quedaria il·legible sobre groc.
     Aquest token sempre és fosc. */
  --ink-on-bright: #0a0a0a;
}

/* ── Dark mode ─────────────────────────────────────── */
html.dark {
  --bg:          #111112;
  --bg-soft:     #1c1c1e;
  --bg-elevated: #1f1f22;          /* dark: separació visible respecte a --bg */

  --ink:   #e8e6e2;
  --ink-2: rgba(255, 255, 255, 0.68);
  --ink-3: rgba(255, 255, 255, 0.45);
  --ink-4: rgba(255, 255, 255, 0.28);

  --border:   rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
}