/* ============================================================
   pipe.ampero — token del sistema visivo
   Una sola fonte per colori, spazi, testi e raggi. Le pagine e i componenti
   usano solo questi nomi: un tema cambia i valori, mai le regole.
   Documentazione: Claudio/Progetti/Projects/Amperofy/ux/DESIGN-SYSTEM.md
   ============================================================ */

@font-face {
  font-family: "Inter Pipe";
  src: url("/assets/font/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Pipe";
  src: url("/assets/font/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* marchio: non si cambiano mai */
  --marchio: #ef5223;
  --scuro-marchio: #28282b;

  /* spazi: multipli di 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* raggi */
  --r1: 4px; --r2: 6px; --r3: 8px;

  /* testi */
  --font: "Acumin Pro", "acumin-pro", "Inter Pipe", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-codice: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-micro: 11px; --t-piccolo: 12px; --t-base: 13px; --t-medio: 14px; --t-titolo: 16px; --t-pagina: 20px;

  /* misure della cornice */
  --colonna-l: 224px; --colonna-chiusa-l: 52px; --testata-h: 44px; --riga-h: 36px; --bersaglio: 32px;
  --pagina-m: 20px;

  /* tema Chiaro */
  color-scheme: light;
  --fondo: #f4f4f5;
  --superficie: #ffffff;
  --superficie-2: #fafafa;
  --passaggio: #f1f1f3;
  --bordo: #e3e3e6;
  --bordo-forte: #c4c4ca;
  --testo: #1f1f22;
  --testo-2: #55555d;
  --testo-3: #6b6b74;

  --azione: #cf3f12;
  --azione-sopra: #b23510;
  --azione-testo: #ffffff;
  --accento: #c23a10;
  --accento-tenue: #fdeee8;
  --fuoco: #ef5223;

  --ok: #14702e;      --ok-tenue: #e4f3e8;
  --ambra: #8a5000;   --ambra-tenue: #fbefdb;
  --rosso: #b72a15;   --rosso-tenue: #fbe6e2;
  --info: #1d5ea8;    --info-tenue: #e5eef9;
  --neutro-tenue: #ececee;

  --prezzo-recente: #0b7a3b;
  --prezzo-medio: #47801f;
  --prezzo-vecchio: #a85f00;
  --prezzo-listino: #c0281b;

  --colonna-fondo: #28282b;
  --colonna-testo: #f3f3f4;
  --colonna-testo-2: #b4b4bb;
  --colonna-passaggio: rgba(255, 255, 255, .08);
  --colonna-bordo: rgba(255, 255, 255, .12);

  --bianco-foto: #ffffff;   /* le foto prodotto hanno il fondo bianco, in ogni tema */
  --velo: rgba(20, 20, 22, .45);
  --ombra-finestra: 0 8px 28px rgba(20, 20, 22, .24);
}

html[data-tema] {
  color-scheme: dark;
  --azione: #cf3f12;
  --azione-sopra: #e0491a;
  --azione-testo: #ffffff;
  --fuoco: #ff7a50;
  --velo: rgba(0, 0, 0, .6);
  --ombra-finestra: 0 8px 28px rgba(0, 0, 0, .5);
  --ok: #86dca6;      --ok-tenue: rgba(134, 220, 166, .14);
  --ambra: #f2c75c;   --ambra-tenue: rgba(242, 199, 92, .14);
  --rosso: #ff9f90;   --rosso-tenue: rgba(255, 159, 144, .14);
  --info: #9cc6ff;    --info-tenue: rgba(156, 198, 255, .14);
  --prezzo-recente: #6fdc9b;
  --prezzo-medio: #b9e07a;
  --prezzo-vecchio: #f5b65a;
  --prezzo-listino: #ff8d80;
  --accento: #ff9a78;
  --colonna-testo: #f3f0ec;
  --colonna-testo-2: #b8b0a8;
  --colonna-bordo: rgba(255, 255, 255, .1);
}

html[data-tema="grafite"] {
  --fondo: #1c1d20; --superficie: #2a2b2f; --superficie-2: #232428; --passaggio: #33343a;
  --bordo: #3a3b41; --bordo-forte: #55565e;
  --testo: #e7e7ea; --testo-2: #bcbdc4; --testo-3: #a2a3ab;
  --accento-tenue: #4a2a20; --neutro-tenue: #3a3b41;
  --colonna-fondo: #131417;
}
html[data-tema="moka"] {
  --fondo: #1d1612; --superficie: #2e231d; --superficie-2: #261d18; --passaggio: #392c25;
  --bordo: #47362b; --bordo-forte: #66503f;
  --testo: #f0e6dd; --testo-2: #cfbfb2; --testo-3: #b8a596;
  --accento-tenue: #55301f; --neutro-tenue: #47362b;
  --colonna-fondo: #150e0a;
}
html[data-tema="ardesia"] {
  --fondo: #18181b; --superficie: #2a2522; --superficie-2: #221f1d; --passaggio: #352f2b;
  --bordo: #3c3532; --bordo-forte: #5a504b;
  --testo: #ece6e1; --testo-2: #c6bdb6; --testo-3: #a99f98;
  --accento-tenue: #4d2c21; --neutro-tenue: #3c3532;
  --colonna-fondo: #1b1715;
}