/* tokens.css — sistema de disseny Halftoner.
   Monocrom, linies fines, radis petits. Cap color de marca saturat. */

:root {
  --ink:   #14141a;
  --muted: #8b8b95;
  --line:  #e7e7ea;
  --soft:  #fafafa;
  --paper: #ffffff;
  --warn:  #b4600a;

  /* Marc de la interfície (capçalera, barres, lateral, estat): un gris clar
     neutre. La graella i la pestanya activa es queden en blanc (--paper). */
  --chrome:    #f5f5f3;

  /* Barra de pestanyes (a la manera de l'Airtable): les inactives sobre el fons
     del marc i separades per una línia fina; l'activa, blanca com la graella. */
  --tabs-fons: var(--chrome);
  --tabs-sep:  #d9d9d5;

  --radius: 7px;
  --radius-lg: 10px;

  --fs-base: 13px;
  --fs-sm: 12px;
  --fs-xs: 11px;

  /* Línies de la graella (les pinta el canvas): una mica més fosques que les
     vores de la resta de la interfície, perquè les files es llegeixin bé. */
  --grid-line: #d8d8de;

  /* Metriques del grid: les llegeix grid.js, no nomes el CSS. */
  --row-height: 30px;
  /* Columna dels números de fila. El layout hi alinea la primera pestanya i el
     botó de les taules: si canvia aquí, canvia a tot arreu. */
  --gutter-width: 52px;
  --header-height: 34px;

  color-scheme: light;
}

/* Descomenta quan deixis el woff2 a webfonts/k3plerSans/ (mira'n el README).
   Mentre el fitxer no hi sigui, el @font-face nomes genera un 404 per carrega:
   la pila de fallback (system-ui) ja fa la seva feina.

@font-face {
  font-family: "K3plerSans";
  src: url("../webfonts/k3plerSans/K3plerSans.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
*/

*, *::before, *::after { box-sizing: border-box; }

/* L'atribut hidden ha de guanyar sempre. Qualsevol regla nostra amb `display`
   i una classe el tomba per especificitat, i llavors amagar un element amb
   el.hidden = true deixa de funcionar sense dir res. */
[hidden] { display: none !important; }

body {
  font-family: "K3plerSans", system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  margin: 0;
}

/* Columnes numeriques: xifres d'amplada fixa perque els decimals s'alineïn. */
.num { font-variant-numeric: tabular-nums; }

/* Marca: "k3pler" en 600 + "grid" en 300 apagat. */
.marca {
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
}
.marca span {
  font-weight: 300;
  color: var(--muted);
}

/* Firma halftone: trama de punts decreixent. Icona del LLM i detall de marca. */
.halftone {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.halftone i {
  display: block;
  border-radius: 50%;
  background: var(--muted);
}
.halftone i:nth-child(1) { width: 5px; height: 5px; }
.halftone i:nth-child(2) { width: 4px; height: 4px; opacity: 0.75; }
.halftone i:nth-child(3) { width: 3px; height: 3px; opacity: 0.5; }
.halftone i:nth-child(4) { width: 2px; height: 2px; opacity: 0.3; }