/* ============================================================
   CROMA — Gestionale · 1. VARIABILI / TOKEN
   ------------------------------------------------------------
   Punto unico per intervenire sulla grafica. Tutto in unità
   dinamiche (rem / clamp / %); nessun px "magico" sparso nei
   componenti. Adattato dall'architettura token CROMA.
   I COLORI di brand sono quelli del design system (palette
   scura warm-black + 7 accenti) — non la palette cream/red.
   ============================================================ */

:root {
  /* — Motore fluido (da min a max viewport) — */
  --min-view: 575;
  --max-view: 1920;
  --fluid: calc((100vw - (var(--min-view) * 1px)) / (var(--max-view) - var(--min-view)));

  /* — Tipografia: famiglie (dal design system) — */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "PP Editorial New", Georgia, "Times New Roman", serif;

  /* — Scala tipografica (adattata a un'app densa, in rem) — */
  --xxs-text: 0.6875rem;   /* 11px · micro-tag, contatori */
  --xs-text:  0.75rem;     /* 12px · meta, eyebrow */
  --sm-text:  0.8125rem;   /* 13px · testo secondario */
  --regular-text: 0.875rem;/* 14px · corpo / base UI */
  --md-text:  0.9375rem;   /* 15px · testo in evidenza */
  --md-plus-text: 1rem;   /* 16px · testo in evidenza intermedio */
  --lg-text:  1.0625rem;   /* 17px · titoli di sezione */
  --xl-text:  clamp(1.3125rem, 1.15rem + 0.7vw, 1.5rem);   /* 21→24 · titolo pagina */
  --xxl-text: clamp(1.875rem, 1.4rem + 2vw, 2.375rem);     /* 30→38 · numeri statistiche */
  --display-text: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);    /* numeri grandi / importi */

  /* — Pesi e interlinee — */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --tracking-label: 0.14em;  /* eyebrow / wordmark */
  --tracking-tight: -0.01em;

  /* — Spaziatura (rem + clamp per i respiri grandi) — */
  --xxs-space: 0.25rem;    /* 4 */
  --xs-space:  0.5rem;     /* 8 */
  --sm-space:  0.75rem;    /* 12 */
  --regular-space: 1rem;   /* 16 */
  --md-space:  1.25rem;    /* 20 */
  --lg-space:  clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
  --xl-space:  clamp(1.5rem, 1rem + 2.2vw, 2.25rem);   /* padding pagina */

  /* — Raggi — */
  --small-radius: 0.375rem;   /* 6px · controlli piccoli */
  --regular-radius: 0.5rem;   /* 8px · bottoni, chip */
  --medium-radius: 0.625rem;  /* 10px · input */
  --large-radius: 0.875rem;   /* 14px · card */
  --xl-radius: 1rem;          /* 16px · modali, pannelli */
  --pill-radius: 999px;

  /* — Misure layout — */
  --sidebar-width: 15.75rem;        /* 252px */
  --sidebar-collapsed: 4.625rem;    /* 74px */
  --content-max: none;              /* contenuto principale a larghezza piena */
  --topbar-pad-y: 1.125rem;
  --avatar-sm: 1.625rem;            /* 26px */
  --avatar-md: 2rem;                /* 32px */
  --avatar-lg: 2.875rem;            /* 46px */

  /* — Ombre (riservate a media e overlay, come da brand) — */
  --shadow-pop: 0 1.5rem 3.75rem -1.25rem rgba(0, 0, 0, 0.7);
  --shadow-modal: 0 2.5rem 5.6rem -1.875rem rgba(0, 0, 0, 0.8);
  --shadow-panel: -1.5rem 0 3.75rem -1.25rem rgba(0, 0, 0, 0.7);

  /* — Transizioni — */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.14s;
  --t-mid: 0.22s;
  --t-slow: 0.26s;

  /* — Palette accenti CROMA (invariata) — */
  --c-purple: #9788FF;
  --c-green:  #36F4A4;
  --c-yellow: #C3D754;
  --c-orange: #FF8800;
  --c-pink:   #EF78B6;
  --c-cyan:   #78D3EF;
  --c-darkgreen: #1C6751;
  --c-on-accent: #15140F;  /* testo su fill accento chiaro */

  /* — Accenti "ink": versione leggibile come TESTO/segni.
     In dark coincidono col brand; in light diventano più scuri. — */
  --ink-purple: var(--c-purple);
  --ink-green:  var(--c-green);
  --ink-yellow: var(--c-yellow);
  --ink-orange: var(--c-orange);
  --ink-pink:   var(--c-pink);
  --ink-cyan:   var(--c-cyan);

  /* — Significati semantici (stato salute / urgenza) — */
  --health-ok: var(--c-green);
  --health-warn: var(--c-yellow);
  --health-crit: var(--c-orange);
}


/* ============================================================
   TEMA — Scuro (default) e Chiaro
   --cg-ink è una tripletta RGB così da poter comporre alpha
   con rgba(var(--cg-ink), .5). Tutti i livelli di superficie
   derivano da qui; i componenti non usano mai colori assoluti.
   ============================================================ */
:root,
:root[data-theme="dark"] {
  --cg-bg: #191815;        /* canvas warm-black */
  --cg-sidebar: #141310;
  --cg-surface: #1F1E1B;   /* card principali */
  --cg-raised: #232320;    /* input, pill neutre */
  --cg-col: #1B1A17;       /* colonne kanban / drawer */
  --cg-card: #23221F;      /* card kanban */
  --cg-ink: 232, 232, 232; /* fog grey (testo) */
  --cg-text: #E8E8E8;
  --cg-toast-bg: #E8E8E8;
  --cg-toast-text: #15140F;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --cg-bg: #F1EFE8;
  --cg-sidebar: #E9E6DD;
  --cg-surface: #FBFAF6;
  --cg-raised: #ECEAE1;
  --cg-col: #EAE7DD;
  --cg-card: #FFFFFF;
  --cg-ink: 38, 35, 28;    /* warm near-black (testo) */
  --cg-text: #211F18;
  --cg-toast-bg: #211F18;
  --cg-toast-text: #F1EFE8;
  color-scheme: light;
  /* Accenti "ink" scuriti per leggibilità su superfici chiare */
  --ink-purple: #6B58DD;
  --ink-green:  #0C7A4D;
  --ink-yellow: #6B7817;
  --ink-orange: #BF5C00;
  --ink-pink:   #C7407E;
  --ink-cyan:   #15768F;
  /* Colori identità (avatar/logo) scuriti solo in light */
  --accent-ink: color-mix(in srgb, var(--accent) 56%, #14110B);
  /* Testi secondari più contrastati in light */
  --muted: rgba(var(--cg-ink), 0.64);
  --faint: rgba(var(--cg-ink), 0.5);
}

/* — Token derivati condivisi (linee, testi muti, hover) —
   Definiti dopo il tema così reagiscono al cambio di --cg-ink. */
:root {
  --line: rgba(var(--cg-ink), 0.08);
  --line-soft: rgba(var(--cg-ink), 0.07);
  --line-strong: rgba(var(--cg-ink), 0.14);
  --muted: rgba(var(--cg-ink), 0.66);
  --faint: rgba(var(--cg-ink), 0.52);
  --hover: rgba(var(--cg-ink), 0.05);
  --hover-strong: rgba(var(--cg-ink), 0.1);
  --accent-soft: rgba(151, 136, 255, 0.14); /* selezione/nav attiva */
  --accent-ink: var(--accent); /* colori identità: invariati in dark */
}