/* ==========================================================================
   Nice B2B — design tokens
   Stessi nomi e valori delle variabili del documento Pencil (707bc79a…/untitled.pen).
   Se cambia un valore in Pencil, va cambiato qui e basta.
   ========================================================================== */

:root {
  /* Colori — palette Nice Group (nicegroup.it) */
  --brand: #1C1C1C;          /* azione primaria: bottoni neri a pillola */
  --brand-soft: #F4EEF6;
  --brand-legacy: #DC72DE;
  --accent: #DC72DE;         /* stella Nice: punti, Best price, focus */
  --accent-ink: #A43FA6;     /* orchidea leggibile per testi e icone */
  --accent-soft: #FAF0FA;

  --ink: #1C1C1C;
  --ink-2: #4A4A4A;
  --muted: #6B6B6B;
  --on-dark-muted: #BDBDBD;

  --bg: #F7F6F4;             /* carta calda */
  --surface: #FFFFFF;
  --line: #ECEAE6;

  --ok: #2C7756;      --ok-soft: #EAF5EF;   --dot-ok: #3DBE84;
  --warn: #8A6100;    --warn-soft: #FBF3DE; --dot-warn: #E8B021;
  --ko: #B4342F;      --ko-soft: #FBECEB;   --dot-ko: #E2574F;
  --best: #A43FA6;    --best-soft: #FAF0FA;

  /* Colori delle linee (solo per nomi e tessere delle linee) */
  --line-diamantiny: #6D35C2;  --line-diamantiny-soft: #F1E8FF;
  --line-elasticolor: #0B6DAD;
  --line-monster-high: #1C1C1C;
  --line-slime-lab: #14804B;
  --line-bubble-wow: #8A5A00;
  --line-puzzle-3d: #C2410C;
  --line-magic-sand: #B0259F;
  --line-hydro-blaster: #2B4CC0;
  --line-nice-baby: #0E7490;

  /* Tipografia */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-fun: "Fredoka", var(--font-sans);

  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-h5: 18px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: 30px;
  --fs-h1: 40px;
  --fs-display: 54px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;   /* titoli */
  --fw-bold: 700;       /* etichette, bottoni, prezzi */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  /* Spazi */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-14: 56px; --s-16: 64px; --s-18: 72px; --s-20: 80px;

  --gutter: 56px;            /* margini di pagina desktop */
  --header-gutter: 40px;
  --container: 1440px;
  --section-gap: 64px;

  /* Raggi */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;   /* card */
  --r-xl: 20px;
  --r-2xl: 28px;  /* riquadri grandi */
  --r-pill: 999px;

  /* Ombre: solo per elementi sospesi */
  --shadow-float: 0 16px 40px rgba(28, 28, 28, .16);
  --shadow-pop: 0 18px 44px rgba(28, 28, 28, .20);
  --shadow-hover: 0 14px 32px rgba(28, 28, 28, .08);
  --veil: rgba(28, 28, 28, .5);

  /* Focus */
  --focus: 0 0 0 3px rgba(220, 114, 222, .55);

  /* Movimento */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;

  /* Componenti */
  --header-h: 76px;
  --cartbar-h: 0px;
  --z-header: 50;
  --z-dropdown: 60;
  --z-cartbar: 70;
  --z-overlay: 80;
  --z-toast: 90;
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; --header-gutter: 24px; --section-gap: 48px; }
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --header-gutter: 16px;
    --section-gap: 40px;
    /* small print readable on phones: captions 12px, badges 11px */
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-h1: 26px;
    --fs-h2: 22px;
    --fs-h3: 20px;
    --fs-display: 34px;
  }
}