/* ============================================
   THEMES — Variables CSS per a mode clar/fosc
   ============================================ */

/* Tema fosc (per defecte) — estètica terminal CRT */
[data-theme="dark"] {
  --bg-primary: #0a0a14;
  --bg-secondary: #12122a;
  --bg-panel: #1a1a3e;
  --bg-button: #2a2a5e;
  --bg-button-hover: #3a3a7e;
  --bg-button-active: #4a4a9e;

  --text-primary: #e0e0ff;
  --text-secondary: #a0a0cc;
  --text-accent: #00ff88;
  --text-title: #ffcc00;
  --text-danger: #ff4444;
  --text-success: #00ff88;
  --text-warning: #ffcc00;
  --text-muted: #606088;

  --border-color: #3a3a6e;
  --border-glow: #00ff8844;

  --glow-color: #00ff88;
  --glow-intensity: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color);

  --scanline-opacity: 0.08;
  --crt-vignette-opacity: 0.3;
}

/* Tema clar — estètica paper/llibre */
[data-theme="light"] {
  --bg-primary: #f0eadc;
  --bg-secondary: #e8e0d0;
  --bg-panel: #faf6ee;
  --bg-button: #d4cbb8;
  --bg-button-hover: #c4b8a0;
  --bg-button-active: #b4a888;

  --text-primary: #2a2420;
  --text-secondary: #5a5040;
  --text-accent: #8b4513;
  --text-title: #6b3000;
  --text-danger: #cc2200;
  --text-success: #2e7d32;
  --text-warning: #e6a800;
  --text-muted: #9a9080;

  --border-color: #c4b8a0;
  --border-glow: transparent;

  --glow-color: transparent;
  --glow-intensity: none;

  --scanline-opacity: 0.03;
  --crt-vignette-opacity: 0.1;
}

/* ============================================
   MIDES DE FONT — Escala retro (Press Start 2P)
   ============================================ */

[data-font-size="small"] {
  --font-title: 1.0rem;
  --font-subtitle: 0.75rem;
  --font-body: 0.65rem;
  --font-btn: 0.58rem;
  --font-muted: 0.52rem;
}

[data-font-size="medium"] {
  --font-title: 1.3rem;
  --font-subtitle: 0.95rem;
  --font-body: 0.8rem;
  --font-btn: 0.7rem;
  --font-muted: 0.6rem;
}

[data-font-size="large"] {
  --font-title: 1.6rem;
  --font-subtitle: 1.15rem;
  --font-body: 0.98rem;
  --font-btn: 0.85rem;
  --font-muted: 0.72rem;
}

[data-font-size="x-large"] {
  --font-title: 1.9rem;
  --font-subtitle: 1.35rem;
  --font-body: 1.15rem;
  --font-btn: 1.0rem;
  --font-muted: 0.85rem;
}

[data-font-size="xx-large"] {
  --font-title: 2.2rem;
  --font-subtitle: 1.55rem;
  --font-body: 1.32rem;
  --font-btn: 1.15rem;
  --font-muted: 0.98rem;
}

/* ============================================
   MIDES DE FONT — Escala accessible (Verdana)
   Multiplicador ~1.5× respecte l'escala retro
   ============================================ */

[data-font-family="accessible"][data-font-size="small"] {
  --font-title: 1.5rem;
  --font-subtitle: 1.1rem;
  --font-body: 0.95rem;
  --font-btn: 0.85rem;
  --font-muted: 0.78rem;
}

[data-font-family="accessible"][data-font-size="medium"] {
  --font-title: 1.95rem;
  --font-subtitle: 1.4rem;
  --font-body: 1.2rem;
  --font-btn: 1.05rem;
  --font-muted: 0.9rem;
}

[data-font-family="accessible"][data-font-size="large"] {
  --font-title: 2.4rem;
  --font-subtitle: 1.7rem;
  --font-body: 1.45rem;
  --font-btn: 1.28rem;
  --font-muted: 1.08rem;
}

[data-font-family="accessible"][data-font-size="x-large"] {
  --font-title: 2.85rem;
  --font-subtitle: 2.0rem;
  --font-body: 1.7rem;
  --font-btn: 1.5rem;
  --font-muted: 1.28rem;
}

[data-font-family="accessible"][data-font-size="xx-large"] {
  --font-title: 3.3rem;
  --font-subtitle: 2.3rem;
  --font-body: 1.95rem;
  --font-btn: 1.7rem;
  --font-muted: 1.45rem;
}