/* JouleSpecs — Design tokens.
   Ghiaccio e brace. La carta resta fredda — grigio ghiaccio, mai crema — e tutto
   il calore sta nell'accento: è il contrasto fra la superficie e l'energia che
   ci passa dentro, ed è la sola idea da cui discende il resto.

   L'arancio non è quello dei palloni da basket (25°, saturazione 100%): è
   l'arancio industriale, spostato sul rosso e smorzato — 18-20° di tinta, 88-91%
   di saturazione. Il riferimento è normato e viene dal dominio: i cavi ad alta
   tensione delle auto elettriche sono arancio per obbligo (ISO 6469), e quello
   è l'arancio di chi lavora con la corrente, non di chi la pubblicizza.

   Nessun radius: è un libretto stampato, non un'app. Un tema solo, chiaro. */

:root {
  /* SUPERFICI — carta fredda, non schermo: grigio ghiaccio, niente crema */
  --color-bg:           #F2F5F6;   /* carta ghiaccio */
  --color-bg-subtle:    #E8EDEF;   /* carta scurita: sezioni alternate, hover */
  --color-bg-inset:     #DDE3E6;   /* header tabelle, input, well */
  --color-bg-overlay:   #F8FAFB;   /* dropdown, menu */
  --color-plate:        #FFFFFF;   /* lastra: SOLO dietro foto e tabelle dei dati */
  --color-ink:          #17181A;   /* superficie inversa: footer, nameplate — antracite */

  /* BORDI */
  --color-border:         #D0D8DB;
  --color-border-strong:  #8A9095;
  --color-border-subtle:  #DDE3E6;

  /* TESTO — antracite appena freddo, mai nero puro: il caldo è tutto dell'accento */
  --color-text-primary:    #1F2327;   /* 14.4:1 su carta */
  --color-text-secondary:  #464C52;   /*  7.9:1 */
  --color-text-tertiary:   #676D74;   /*  4.8:1 — AA su carta e su subtle; mai sotto 13px su inset */
  --color-text-disabled:   #979DA3;
  --color-text-inverse:    #F2F5F6;

  /* BRAND — due aranci con due mestieri, e non sono intercambiabili.
     ⚠️ La RUGGINE porta il testo: è l'unico dei due che passa AA sulle tre
     superfici (6.2 carta, 5.7 subtle, 5.2 inset). La BRACE è più viva e si ferma
     a 4.2: va bene per un segno, un pieno, una barra di grafico o un titolo
     grande — mai per testo piccolo su fondo chiaro. Scambiarli è il modo in cui
     un tema arancio diventa illeggibile senza che nessuno se ne accorga. */
  --color-accent:          #9C3E12;   /* ruggine: testo, link, filetto dell'header */
  --color-accent-hover:    #7E320E;   /* 8.2:1 */
  --color-accent-subtle:   #E8EDEF;   /* NEUTRO: l'arancio non si diluisce mai in sfondo */
  --color-accent-border:   #D0D8DB;

  --color-ember:           #CC4A12;   /* brace: il segno, i pieni, i dati. Solo oggetti grafici */
  --color-ember-on-ink:    #EA7038;   /* la brace sul fondo antracite: 5.8:1 */

  /* CARICA — il verde della cella del marchio, contorno e carica, e solo lì.
     Verde perché la carica è la cosa positiva. Un valore solo per tutti e due i fondi
     (3.7:1 su carta, 4.4:1 su antracite), così il marchio non cambia colore fra
     header e footer. Tinta 114°, verde foglia: sta a 49° dal verde-acqua di
     `--color-success`, e la distanza serve — il marchio non deve sembrare un
     messaggio di stato che dice «va bene». */
  --color-charge:          #35912B;

  /* STATI SEMANTICI — inchiostri da timbro.
     ⚠️ Quando il marchio si prende l'arancio, gli stati che erano arancio gli
     vanno addosso: l'avviso è passato dall'ocra (16° dalla ruggine, cioè
     indistinguibile) a un giallo scuro, e il pericolo da un mattone a un cremisi.
     Restano comunque tinte vicine per chiarezza, quindi la regola è che **nessuno
     stato si affida al solo colore**: blocco con fondo `*-subtle`, filetto a
     sinistra e glifo. Il colore conferma, non informa. */
  --color-success:         #2F6B5A;
  --color-success-subtle:  #DCE8E1;
  --color-warning:         #6B5200;   /* giallo scuro, 27° dalla ruggine */
  --color-warning-subtle:  #F3E4C2;
  --color-danger:          #9E1C33;   /* cremisi, 30° dalla ruggine */
  --color-danger-subtle:   #F2DADF;

  /* CATEGORIE JOU-* — il colore vive solo nel quadratino del badge e nel filtro,
     mai in sfondo. Stanno tutte oltre gli 86° di tinta dall'arancio del marchio,
     così un pallino di categoria non si confonde mai con un elemento del brand.
     La mappa vera è in `apps/catalog/templatetags/catalog_tags.py`: questi token
     esistono perché i due elenchi restino allineati a vista. */
  --color-cat-por: #17627D;   /* Power station portatili — blu petrolio */
  --color-cat-bal: #3E7A2E;   /* Accumulo da balcone — verde foglia */
  --color-cat-res: #2F4E8F;   /* Accumulo residenziale — blu oltremare */
  --color-cat-con: #6B4E9E;   /* Conversione e gestione — viola */
  --color-cat-mob: #146B5C;   /* Mobilità e off-grid — verde abete */
  --color-cat-acs: #5B6570;   /* Accessori — ardesia */

  /* FASCE F1–F5 — scala d'inchiostro, usata solo nei segmenti del badge */
  --color-tier-1: #9AA1A8;
  --color-tier-2: #858D95;
  --color-tier-3: #646B73;
  --color-tier-4: #464B52;
  --color-tier-5: #1A1C1F;

  /* FAMIGLIE TIPOGRAFICHE (S15): Jost per i titoli, Source Sans 3 per il testo */
  --font-display: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Source Sans 3", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;


  /* SCALA TIPOGRAFICA (ratio 1.25 — Major Third) */
  --text-xs:   0.694rem;   /* 11px */
  --text-sm:   0.833rem;   /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.563rem;   /* 25px */
  --text-2xl:  1.953rem;   /* 31px */
  --text-3xl:  2.441rem;   /* 39px */
  --text-4xl:  3.052rem;   /* 49px */
  --text-5xl:  3.815rem;   /* 61px */
  --text-6xl:  4.768rem;   /* 76px — solo hero home desktop */

  /* LINE-HEIGHT */
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-data:    1.0;

  /* LETTER SPACING */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

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

  /* BORDER RADIUS — zero. È un libretto stampato, non un'app. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* RIGHE E OMBRE */
  --rule:            1px solid var(--color-border);
  --rule-strong:     1px solid var(--color-border-strong);
  --rule-ink:        1px solid var(--color-ink);
  --shadow-overlay:  0 12px 32px rgba(26, 28, 31, 0.14);   /* solo dropdown e menu */

  /* TRANSIZIONI */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease-out;
}