/* CobotCompare — Design tokens.
   Petrolio su carta ghiaccio (scelta dell'utente, 2026-09-24). La famiglia *specs
   condivide carta e struttura e si distingue per l'accento: verde oliva SewingSpecs
   (105°), cremisi CoffeeSpecs (353°), indaco MakerSpecs (230°, e il verde d'acquisto a
   163°), ruggine JouleSpecs (18°). Il petrolio (186°) sta nella zona libera fra
   MakerSpecs e il resto, e si legge come strumento: il dato tecnico che il sito promette.
   Nessun radius. Un tema solo, chiaro: il sito non ha una versione scura. */

:root {
  /* SUPERFICI — carta fredda, la stessa della famiglia */
  --color-bg:           #F2F5F6;   /* carta ghiaccio */
  --color-bg-subtle:    #E7EDEE;   /* carta scurita: sezioni alternate, hover */
  --color-bg-inset:     #DCE4E6;   /* header tabelle, input, well */
  --color-bg-overlay:   #F8FAFB;   /* dropdown, menu */
  --color-plate:        #FFFFFF;   /* lastra: SOLO dietro foto e tabelle dei dati */
  --color-ink:          #0E2326;   /* superficie inversa: copertina, footer — petrolio in ombra */

  /* BORDI */
  --color-border:         #CFD9DB;
  --color-border-strong:  #7F8C8F;
  --color-border-subtle:  #DCE4E6;

  /* TESTO — inchiostro appena virato petrolio, mai nero puro */
  --color-text-primary:    #1C2426;   /* 14.4:1 su carta */
  --color-text-secondary:  #465357;   /* 7.3:1 */
  --color-text-tertiary:   #5E6B71;   /* AA su carta e su subtle; mai sotto 13px su inset */
  --color-text-disabled:   #9AA5A8;
  --color-text-inverse:    #F2F5F6;

  /* BRAND — Petrolio */
  --color-accent:          #0A6670;   /* 6.1:1 su carta, e il bianco su di lui */
  --color-accent-hover:    #084F57;
  --color-accent-subtle:   #E7EDEE;   /* NEUTRO: l'accento non si diluisce mai in sfondo */
  --color-accent-border:   #CFD9DB;
  --color-accent-light:    #2A8A93;   /* stati, grafici: mai testo piccolo */
  --color-accent-on-ink:   #86D6D2;   /* l'accento sul fondo scuro: 9.8:1 */

  /* STATI SEMANTICI — inchiostri da timbro. Il successo non può essere il colore
     del marchio: userebbe l'identità per dire «va bene». Il verde sta a 60° dal petrolio. */
  --color-success:         #2F6B34;
  --color-success-subtle:  #DDEBDD;
  --color-warning:         #8A5200;
  --color-warning-subtle:  #F3E4C2;
  --color-danger:          #9B2C1B;
  --color-danger-subtle:   #F1DCD3;

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