/* ============================================================================
 *  themes.css — Temes visuals (4). S'apliquen amb [data-theme] al <body>.
 *  ORBYS: mides tàctils còmodes en pantalla gran (secció final).
 * ==========================================================================*/

/* ─── FOSC (per defecte) ─────────────────────────────────────────────────── */
body[data-theme="dark"]{
  --bg:#0a0f1c; --bg-bar:rgba(11,17,32,.82); --bg-card:#111a2e; --bg-elev:#0d1524;
  --border:rgba(148,163,184,.14); --hover:rgba(148,163,184,.08);
  --text:#eef2f8; --text-dim:#9aa8bd; --text-muted:#7f8da3;  /* era #64748b = 3,64:1 sobre la targeta */
  --accent:#2b9dff; --accent2:#f2c94c; --accent-soft:rgba(43,157,255,.14);
  --code-bg:rgba(148,163,184,.14); --code-fg:#8fd3ff;
  --tip-bg:rgba(34,211,168,.10); --warn-bg:rgba(245,158,11,.10); --info-bg:rgba(43,157,255,.10);
  --code-block-bg:#020814; --code-block-fg:#e6edf3; --code-border:#1e2b45;
  /* Tinta damunt de --accent. Blanc sobre #2b9dff dona 2,85:1 (falla AA);
     esta tinta fosca dona 6,62:1. Vegeu la nota al final del fitxer. */
  --on-accent:#06121f;
}

/* ─── CLAR ───────────────────────────────────────────────────────────────── */
body[data-theme="light"]{
  --bg:#f4f7fb; --bg-bar:rgba(255,255,255,.85); --bg-card:#ffffff; --bg-elev:#eef2f8;
  --border:rgba(15,23,42,.10); --hover:rgba(15,23,42,.045);
  --text:#0f1b2d; --text-dim:#54627a; --text-muted:#5f6b7d;  /* era #8592a6 = 2,93:1, fallava AA */
  --accent:#0a72d6; --accent2:#c9971e; --accent-soft:rgba(10,114,214,.10);
  --code-bg:rgba(10,114,214,.10); --code-fg:#0a5bb0;
  --tip-bg:rgba(14,159,126,.10); --warn-bg:rgba(217,119,6,.12); --info-bg:rgba(10,114,214,.08);
  --code-block-bg:#0b1220; --code-block-fg:#e6edf3; --code-border:#cbd5e1;
  --on-accent:#ffffff;   /* ací l'accent ja és fosc: blanc dona 4,78:1 */
}

/* ─── TERMINAL (verd fòsfor) ─────────────────────────────────────────────── */
body[data-theme="terminal"]{
  --bg:#04160c; --bg-bar:rgba(4,22,12,.86); --bg-card:#082014; --bg-elev:#061a10;
  --border:rgba(80,220,140,.18); --hover:rgba(80,220,140,.10);
  --text:#c6f7d8; --text-dim:#79c99a; --text-muted:#4e8f6a;
  --accent:#28e07a; --accent2:#a3e635; --accent-soft:rgba(40,224,122,.14);
  --code-bg:rgba(40,224,122,.16); --code-fg:#7dffb0;
  --tip-bg:rgba(40,224,122,.10); --warn-bg:rgba(245,200,60,.12); --info-bg:rgba(40,224,122,.08);
  --code-block-bg:#010c06; --code-block-fg:#7dffb0; --code-border:#124a2c;
  --font:'JetBrains Mono',var(--mono);
  --on-accent:#03150a;   /* blanc sobre #28e07a era 1,75:1; això dona 10,80:1 */
}

/* ─── OCEÀ ───────────────────────────────────────────────────────────────── */
body[data-theme="ocean"]{
  --bg:#0a1626; --bg-bar:rgba(10,22,38,.84); --bg-card:#10233b; --bg-elev:#0c1d31;
  --border:rgba(120,190,220,.15); --hover:rgba(120,190,220,.08);
  --text:#e6f1fb; --text-dim:#93b6d0; --text-muted:#5e839f;
  --accent:#38bdf8; --accent2:#2dd4bf; --accent-soft:rgba(56,189,248,.14);
  --code-bg:rgba(56,189,248,.14); --code-fg:#a5e5ff;
  --tip-bg:rgba(45,212,191,.10); --warn-bg:rgba(245,158,11,.10); --info-bg:rgba(56,189,248,.08);
  --code-block-bg:#03101f; --code-block-fg:#e6edf3; --code-border:#123a55;
  --on-accent:#04121d;   /* blanc sobre #38bdf8 era 2,14:1; això dona 8,80:1 */
}

/* ─── ORBYS 4K / pantalla tàctil d'aula ──────────────────────────────────── */
@media (min-width:2000px){
  :root{--maxw:1600px}
  html{font-size:20px}
  .btn{padding:.9rem 1.6rem}
  .mainnav a{padding:.7rem 1.05rem;font-size:1rem}
  .tab{padding:.9rem 1.4rem}
  .ex-level{font-size:1rem}
}
/* Zones tàctils mínimes còmodes en qualsevol pantalla gran.
 *
 * ATENCIÓ: ací hi havia `(pointer:coarse)`, que descriu l'apuntador PRIMARI.
 * A l'aula, la pantalla ORBYS es governa des d'un PC amb ratolí connectat, i
 * per tant el navegador informa `pointer:fine` — o siga que tot este bloc es
 * quedava sense aplicar en silenci justament en l'escenari per al qual estava
 * escrit. `any-pointer:coarse` vol dir "hi ha ALGUN apuntador gros disponible",
 * que és la pregunta correcta quan hi ha ratolí i dit alhora. */
@media (any-pointer:coarse), (min-width:1600px){
  .mainnav a,.tab,.btn,.os-tab,
  .anim-replay,.aules-link,.unav,.anar-exercicis,
  .theme-select select{
    min-height:48px;display:inline-flex;align-items:center;
  }
  .accordion-head{min-height:60px}
}

/* En tàctil molts navegadors mantenen el :hover després del tap, i les
 * targetes es queden alçades per l'aire fins que toques en un altre lloc. */
@media (hover:none){
  .unitcard:hover{transform:none;box-shadow:none;border-color:var(--border)}
  .btn-primary:hover,.btn:hover{transform:none}
}

/* ─── Moviment reduït: apaga animacions GSAP i deixa l'estat final ───────── */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;scroll-behavior:auto !important}
}