/* CoffeeSpecs — Design tokens (design guide v2.0 «Il libretto tecnico»)
   Carta bianco ghiaccio, inchiostro neutro, un solo rosso. Nessun radius: è stampa. */

:root {
  /* SUPERFICI — carta, non schermo */
  --color-bg:           #F4F6F8;   /* carta */
  --color-bg-subtle:    #EAEEF1;   /* carta scurita: sezioni alternate, hover */
  --color-bg-inset:     #DFE4E8;   /* header tabelle, input, well */
  --color-bg-overlay:   #FAFBFC;   /* dropdown, menu */
  --color-plate:        #FFFFFF;   /* lastra fotografica: SOLO dietro le foto prodotto */
  --color-ink:          #1A1C1F;   /* superficie inversa: footer, nameplate */

  /* BORDI — righe da libretto */
  --color-border:         #D3D9DE;
  --color-border-strong:  #858D95;
  --color-border-subtle:  #E2E7EB;

  /* TESTO — inchiostro neutro, mai nero puro; i grigi seguono la carta fredda */
  --color-text-primary:    #1A1C1F;
  --color-text-secondary:  #464B52;
  --color-text-tertiary:   #646B73;   /* AA su carta e su subtle; mai sotto 13px su inset */
  --color-text-disabled:   #9AA1A8;
  --color-text-inverse:    #F4F6F8;

  /* BRAND — Rosso macchina: il cremisi della carrozzeria Quamar M80T */
  --color-accent:          #B0182A;   /* 6.4:1 su carta */
  --color-accent-hover:    #8A1220;
  --color-accent-subtle:   #EAEEF1;   /* NEUTRO: il rosso non si diluisce mai in sfondo */
  --color-accent-border:   #D3D9DE;

  /* STATI SEMANTICI — inchiostri da timbro */
  --color-success:         #2E6B3E;
  --color-success-subtle:  #DDE8D6;
  --color-warning:         #8A5200;
  --color-warning-subtle:  #F3E4C2;
  --color-danger:          #8E1B1B;
  --color-danger-subtle:   #F1D9D3;

  /* CATEGORIE CAF-* — il colore vive solo nel quadratino del badge */
  --color-cat-esp: #8C2F1E;   /* Espresso */
  --color-cat-mac: #B5762A;   /* Macinatura */
  --color-cat-inf: #4E6B3A;   /* Infusione e filtro */
  --color-cat-lat: #3E5C8A;   /* Latte e microschiuma */
  --color-cat-acc: #646B73;   /* Accessori */

  /* 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;

  /* CHICCHI DELLA MAPPA — il chicco del logo, colorato per dire il mestiere.
     Crudo verde e tostato bruno non sono una scelta grafica: è la differenza
     che i due mestieri fanno davvero al chicco. Il tostato è un bruno di
     tostatura e non un quasi-nero, che a sedici pixel sarebbe una macchia.
     Dentro ogni mestiere, due gradi dello stesso colore separano i grandi dai
     piccoli: la scala si legge nella carica del pigmento e non nel diametro,
     perché un punto più grosso su una mappa sembra un luogo più grande, e la
     dimensione di una fazenda non è la dimensione della sua terra sulla carta.
     Il chicco senza tipo verificato resta grigio: non lo classifichiamo a
     occhio per non lasciare un buco nella legenda. */
  --color-bean-raw-small:      #9CAB63;
  --color-bean-raw-large:      #4A5722;
  --color-bean-roasted-small:  #A9713F;
  --color-bean-roasted-large:  #4A2A16;
  --color-bean-untyped:        #868B90;

  /* FAMIGLIE TIPOGRAFICHE */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* LARGHEZZE Archivo (asse wdth 62–125): la targa è larga, il dato è stretto */
  --stretch-nameplate: 118%;
  --stretch-display:   104%;
  --stretch-normal:    100%;
  --stretch-data:       90%;

  /* 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;
}