/* ============================================================
   Selehacks — tokens.css · Sistema Selectiva
   ÚNICA font de valors visuals. Les plantilles i base.css només fan servir
   els tokens SEMÀNTICS (--bg, --surface, --text, --accent, --space-*, --radius-*…);
   aquí s'assignen als tokens de MARCA (--blau, --fons, --tinta…). Canviar el
   disseny = canviar aquest fitxer. Les fonts s'auto-allotgen a fonts.css.
   ============================================================ */

:root {
  /* ===== Marca (cada color té una feina) ===== */
  --blau:#1657E8;      --blau-fort:#1140BC;    --blau-tint:#E9EEFE;   /* estudiar */
  --taronja:#FF6A1F;   --taronja-text:#C24100; --taronja-tint:#FFF0E6;/* començar / temps */
  --lila:#7A3BF0;      --lila-text:#6428D6;    --lila-tint:#F2ECFE;   /* el dubte */
  --encert:#10A05F;    --encert-text:#0A7A47;  --encert-tint:#E6F6ED; /* correcció */
  --error:#E11D48;     --error-text:#C11138;   --error-tint:#FDEBEF;
  /* Neutres amb biaix blau (~232°), no grisos purs */
  --fons:#F4F6FD; --superficie:#FFFFFF; --superficie-2:#EDF0FA;
  --linia:#DEE2EF; --linia-forta:#C6CCE2;
  --tinta:#0E1230; --tinta-2:#333A5C; --tinta-3:#626A8E;
  --sobre-marca:#FFFFFF;    /* text sobre blau i lila */
  --sobre-taronja:#0E1230;  /* text sobre taronja: SEMPRE tinta fosca */
  /* Ombres blavoses, mai negre pur */
  --ombra-1:0 1px 2px rgba(14,18,48,.07);
  --ombra-2:0 2px 4px rgba(14,18,48,.05), 0 10px 28px rgba(14,18,48,.09);
  --ombra-focus:0 0 0 3px rgba(22,87,232,.32);

  /* ===== Aliases semàntics (el que consumeixen plantilles i base.css) ===== */
  --bg:var(--fons);
  --surface:var(--superficie);
  --surface-alt:var(--superficie-2);
  --text:var(--tinta);
  --text-muted:var(--tinta-3);
  --border:var(--linia);
  --accent:var(--blau);
  --accent-contrast:var(--sobre-marca);
  --success:var(--encert);
  --warning:var(--taronja-text);
  --danger:var(--error);
  /* Paper: fons dels enunciats (SVG de tinta negra). Blanc en tots dos temes. */
  --paper:#FFFFFF; --paper-ink:#111111;

  /* ===== Tipografia (auto-allotjada a fonts.css) ===== */
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-sans:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --size-xs:12px; --size-sm:15px; --size-base:17px; --size-lg:19px;
  --size-xl:24px; --size-2xl:31px; --size-3xl:42px;
  --weight-normal:400; --weight-bold:700; --weight-display:800;
  --leading-tight:1.15; --leading-normal:1.6;

  /* ===== Espaiat (base 4) ===== */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;

  /* ===== Formes ===== */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-full:999px;
  --border-width:1px; --border-width-strong:3px;
  --shadow-sm:var(--ombra-1); --shadow-md:var(--ombra-2);

  /* ===== Layout ===== */
  --content-width:42rem; --gutter:var(--space-4); --tap-target:44px;

  /* ===== Motion ===== */
  --duration-fast:150ms; --duration-normal:240ms; --ease:cubic-bezier(.2,.7,.3,1);
}

/* Fosc: només redefineix tokens de marca; els aliases hi apunten i el segueixen.
   El guard :not([data-theme="light"]) fa que triar clar explícitament guanyi al
   sistema; el bloc [data-theme="dark"] fa que el toggle manual guanyi. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blau:#6E9BFF;    --blau-fort:#9DBAFF;   --blau-tint:#1A2352;
    --taronja:#FF8A4D; --taronja-text:#FFA877;--taronja-tint:#3A2113;
    --lila:#A98BFF;    --lila-text:#C3AEFF;   --lila-tint:#241A4A;
    --encert:#3FD08A;  --encert-text:#3FD08A; --encert-tint:#0E2E20;
    --error:#FF6A8A;   --error-text:#FF6A8A;  --error-tint:#37141F;
    --fons:#0A0D22; --superficie:#141935; --superficie-2:#1E2447;
    --linia:#2C3360; --linia-forta:#3D4680;
    --tinta:#E9EBF7; --tinta-2:#B9BFDC; --tinta-3:#8F97BC;
    --sobre-marca:#0A0D22; --sobre-taronja:#0A0D22;
    --ombra-1:0 1px 2px rgba(0,0,0,.4);
    --ombra-2:0 2px 4px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.45);
    --ombra-focus:0 0 0 3px rgba(110,155,255,.4);
  }
}
:root[data-theme="dark"]{
  --blau:#6E9BFF;    --blau-fort:#9DBAFF;   --blau-tint:#1A2352;
  --taronja:#FF8A4D; --taronja-text:#FFA877;--taronja-tint:#3A2113;
  --lila:#A98BFF;    --lila-text:#C3AEFF;   --lila-tint:#241A4A;
  --encert:#3FD08A;  --encert-text:#3FD08A; --encert-tint:#0E2E20;
  --error:#FF6A8A;   --error-text:#FF6A8A;  --error-tint:#37141F;
  --fons:#0A0D22; --superficie:#141935; --superficie-2:#1E2447;
  --linia:#2C3360; --linia-forta:#3D4680;
  --tinta:#E9EBF7; --tinta-2:#B9BFDC; --tinta-3:#8F97BC;
  --sobre-marca:#0A0D22; --sobre-taronja:#0A0D22;
  --ombra-1:0 1px 2px rgba(0,0,0,.4);
  --ombra-2:0 2px 4px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.45);
  --ombra-focus:0 0 0 3px rgba(110,155,255,.4);
}

@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration-normal:0ms; }
}