/* ─────────────────────────────────────────────────────────────────────────
 * SISTEMA JOAN SANFELIU · tokens · v3 (24/09/2026)
 * Original: sanfeliu-agencia/marca/sistema/tokens.css — no editar les còpies.
 *
 * Aquí NOMÉS hi ha variables. Els components viuen a `sistema.css`.
 * Serveix joansanfeliu.com, agencia. i formacio.: els tres llocs comparteixen
 * aquest fitxer byte a byte. (El CRM es queda amb la v1: vegeu README.)
 *
 * La v2 és la barreja que va demanar en Joan el 24/09/2026: la composició de
 * northscale.es (escala gran, pes 500, píndoles, blocs arrodonits amb filets,
 * bandes negres, etiquetes mono) amb la identitat de SANFELIU (el logotip i
 * les xifres en Bodoni, l'Archivo, el terra com a accent, material real i
 * cap animació d'entrada).
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color ──────────────────────────────────────────────────────────────
   * Blanc, gris i quasi negre. Els grisos surten de barrejar tinta i paper
   * amb color-mix(): no n'hi ha cap hex propi.
   */
  --tinta:   #111111;  /* text, traços, botó principal */
  --paper:   #ffffff;  /* fons */
  --paper-2: #f6f6f6;  /* bandes clares alternes, hover */
  --grafit:  #0f0f0f;  /* bandes fosques i peu: quasi negre, com la tinta */
  --terra:   #a63d26;  /* accent · pàgina actual, focus, un traç per esquema */

  --gris-fort:  color-mix(in srgb, var(--tinta) 80%, var(--paper)); /* segona línia dels titulars */
  --gris:       color-mix(in srgb, var(--tinta) 64%, var(--paper)); /* cos secundari · ≥4,5:1 */
  --gris-suau:  color-mix(in srgb, var(--tinta) 42%, var(--paper)); /* índexs mono, peus */
  --filet:      color-mix(in srgb, var(--tinta) 10%, var(--paper)); /* filets i graelles */
  --filet-fort: color-mix(in srgb, var(--tinta) 20%, var(--paper)); /* contorn de controls */

  /* Sobre una banda fosca, els mateixos papers al revés. */
  --sobre-fosc:       color-mix(in srgb, var(--paper) 92%, var(--grafit));
  --sobre-fosc-gris:  color-mix(in srgb, var(--paper) 62%, var(--grafit));
  --sobre-fosc-filet: color-mix(in srgb, var(--paper) 14%, var(--grafit));

  /* ── Color funcional ────────────────────────────────────────────────────
   * Només per a estat. Mai decoratius, mai a una landing.
   */
  --ok:    #2f6f4f;
  --avis:  #8a6a1f;
  --alta:  #9c2f1c;
  --ok-tint:   color-mix(in srgb, var(--ok) 10%, var(--paper));
  --avis-tint: color-mix(in srgb, var(--avis) 10%, var(--paper));
  --alta-tint: color-mix(in srgb, var(--alta) 10%, var(--paper));
  --terra-tint: color-mix(in srgb, var(--terra) 9%, var(--paper));

  /* ── Accent secundari ───────────────────────────────────────────────────
   * NOMÉS il·lustracions i diagrames de joansanfeliu.com.
   */
  --navy:      #19314f;
  --navy-suau: #2c4a70;
  --navy-tint: #e8eef5;

  /* ── Tipografia ─────────────────────────────────────────────────────────
   * Tres veus: Bodoni (logotip i xifres), Archivo (tot el que es llegeix, i
   * els titulars a pes 500 amb la segona línia en itàlica grisa) i la mono
   * del sistema operatiu per a índexs, etiquetes i noms tècnics. La mono no
   * es descarrega: és la de cada màquina.
   */
  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', Times, serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono:  ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  /* v3 (24/09/2026, en Joan: «els titulars tal vegada són massa grans»): un
     terç més petits que a la v2. */
  --t-display:     clamp(2.6rem, 1.3rem + 4.2vw, 5.25rem);  /* h1 de portada */
  --t-titular:     clamp(2rem, 1.25rem + 2.4vw, 3.5rem);    /* h2 de secció */
  --t-titular-lh:  1;
  --t-subtitular:  clamp(1.3rem, 1.1rem + .6vw, 1.625rem); /* h3 de targeta */
  --t-entrada:     clamp(1.125rem, 1.02rem + .4vw, 1.3125rem);
  --t-cos:         1rem;
  --t-cos-lh:      1.6;
  --t-xifra:       clamp(3rem, 1.9rem + 4.4vw, 6rem);
  --t-mono:        .75rem;

  --ls-display: -0.035em;
  --ls-titular: -0.03em;
  --ls-mono:    0.12em;
  /* El tracking del logotip és el tret distintiu de la marca: +140
     mil·lèsimes = 0.14em. Mai el tracking per defecte de la font. */
  --ls-logotip: 0.14em;

  /* ── Composició ─────────────────────────────────────────────────────────
   * Caixa ampla i marges generosos. Els controls són píndoles; els blocs,
   * rectangles de cantonada gran amb filets a dins.
   */
  --r:         .75rem;   /* cantonada petita: imatges, peces menudes */
  --r-control: .625rem;  /* botons i camps de formulari (v3: rectangles suaus, sense píndola) */
  --r-pindola: 999px;    /* etiquetes, xips d'opció, enllaços del menú */
  --r-targeta: 1.25rem;  /* targetes soltes, captures, desplegables */
  --r-bloc:    clamp(1.5rem, .9rem + 1.8vw, 2.75rem); /* graelles de filets */

  --caixa: 88rem;
  --marge: clamp(1.25rem, 3.4vw, 2.75rem);
  --seccio: clamp(4.5rem, 2.4rem + 6.4vw, 8rem);
  --capcalera-alt: 4.25rem;
  --transicio: .22s cubic-bezier(.4, 0, .2, 1);

  /* L'única ombra del sistema: la de les peces que suren (la barra quan
     es fa scroll i els desplegables). Cap targeta porta ombra. */
  --ombra-flota: 0 1px 1px rgba(0, 0, 0, .03), 0 14px 36px -14px rgba(0, 0, 0, .2);

  /* Les fletxes dels botons, en els dos colors del sistema. */
  --fletxa-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 10.5 3.5M5 3.5h5.5V9'/%3E%3C/svg%3E");
  --fletxa-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 10.5 3.5M5 3.5h5.5V9'/%3E%3C/svg%3E");
  --mes-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 2.5v9M2.5 7h9'/%3E%3C/svg%3E");
  --mes-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 2.5v9M2.5 7h9'/%3E%3C/svg%3E");

  /* Per sota d'aquí, la nav d'escriptori passa al calaix lateral. */
  --trencament-nav: 1080px;
}