/* ============================================================
   SqueezeMind: Design Tokens
   Estratti dal file sorgente Sito_2024.pdf (Adobe Illustrator).
   Livelli: primitive -> semantic per band -> componenti (main.css).
   I CSS di gruppo (assets/css/<gruppo>.css) usano SOLO questi token.
   ============================================================ */

/* ---------- 1. PRIMITIVE ---------- */
:root {
  /* Colore campionato dal PDF */
  --c-lime-500: #aff912; /* verde primario: band, box marchio, footer, CTA */
  --c-lime-400: #bcf912; /* cerchio hero */
  --c-lime-200: #cefb6e; /* cerchio hero chiaro */
  --c-lime-50: #f3fdd9;  /* tinta chiarissima: note e suggerimenti */

  --c-ink-900: #2e2d2c; /* charcoal: fondo scuro e testo forte */
  --c-ink-700: #404041; /* testo su chiaro */
  --c-ink-500: #69696a; /* testo secondario su chiaro (5,4:1 su bianco) */
  --c-ink-300: #939393; /* solo decorativo */
  --c-ink-100: #cccccc; /* slot immagini da fornire */

  --c-white: #ffffff;
  --c-err: #b3261e;      /* errori dei form (5,6:1 su bianco) */
  --c-tbc: #fff3b0;      /* fondo etichetta "da confermare" */

  /* Tipografia: Montserrat (display, UI) + Raleway (testo), variabili self-hosted */
  --f-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Raleway", "Helvetica Neue", Arial, sans-serif;

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-h1: clamp(2.05rem, 1.25rem + 2.3vw, 3.35rem);
  --fs-h2: clamp(2rem, 1.55rem + 1.05vw, 2.75rem);     /* 32-44 px */
  --fs-h3: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  --fs-lead: clamp(1.3rem, 1rem + 0.95vw, 1.8rem);
  --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0875rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  /* Spazio (scala 4 px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Layout */
  --container: 1360px;
  --gutter: clamp(1rem, 4vw, 5rem);    /* 16 px a 390 */
  --header-h: 4.5rem;                  /* 72 px */
  --sec: clamp(3rem, 1.75rem + 3.4vw, 5.25rem);   /* 77 px a 1440, 48 px a 390 */
  --over: clamp(2.5rem, 7vw, 7rem);    /* immagine hero case che sborda nella band dopo */
  --pixel: clamp(8px, 0.8vw, 12px);

  /* Motion */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 700ms;

  --radius-pill: 999px;
  --z-header: 100;
  --z-overlay: 200;
}

/* ---------- 2. SEMANTIC PER BAND ---------- */
:root,
[data-band="light"] {
  --bg: var(--c-white);
  --fg: var(--c-ink-700);
  --fg-strong: var(--c-ink-900);
  --fg-muted: var(--c-ink-500);
  --accent: var(--c-lime-500);
  --accent-fg: var(--c-ink-900);
  --mark: var(--c-ink-900);        /* indicatori, quadratini, sottolineature */
  --focus: var(--c-ink-900);
  --rule: rgba(46, 45, 44, 0.18);
  --card: var(--c-white);
  --px-fill: var(--c-white);
  --px-accent: var(--c-lime-500);
  --px-ink: var(--c-ink-900);
  --logo-dark: block;
  --logo-light: none;
  --logo-ink: none;
}

[data-band="dark"] {
  --bg: var(--c-ink-900);
  --fg: rgba(255, 255, 255, 0.9);
  --fg-strong: var(--c-white);
  --fg-muted: rgba(255, 255, 255, 0.72);
  --accent: var(--c-lime-500);
  --accent-fg: var(--c-ink-900);
  --mark: var(--c-lime-500);
  --focus: var(--c-lime-500);
  --rule: rgba(255, 255, 255, 0.22);
  --card: rgba(255, 255, 255, 0.04);
  --px-fill: var(--c-white);
  --px-accent: var(--c-lime-500);
  --px-ink: #181716;
  --logo-dark: none;
  --logo-light: block;
  --logo-ink: none;
}

[data-band="lime"] {
  --bg: var(--c-lime-500);
  --fg: var(--c-ink-900);
  --fg-strong: var(--c-ink-900);
  --fg-muted: rgba(46, 45, 44, 0.8);
  --accent: var(--c-ink-900);
  --accent-fg: var(--c-lime-500);
  --mark: var(--c-ink-900);
  --focus: var(--c-ink-900);
  --rule: rgba(46, 45, 44, 0.3);
  --card: rgba(255, 255, 255, 0.35);
  --px-fill: var(--c-white);
  --px-accent: var(--c-ink-900);
  --px-ink: var(--c-ink-900);
  --logo-dark: none;
  --logo-light: none;
  --logo-ink: block;
}