/* ===================================
   COLORS.CSS — Palette generale
   Da usare in ogni progetto:
   - non cambiare i nomi delle variabili
   - cambia solo i valori
   =================================== */

:root {
  /* Primary colors (Blue) */
  --color-primary-800: #082C62;
  --color-primary-700: #0B4293;
  --color-primary-600: #0F58C4;
  --color-primary-500: #136EF5;
  --color-primary-400: #428BF7;
  --color-primary-300: #71A8F9;
  --color-primary-200: #A1C5FB;
  --color-primary-100: #B8D3FC;
  --color-primary-50:  #D0E2FD;
  --color-primary-25:  #E7F0FE;

  /* Alias semantiche (titoli/link/.text-primary) */
  --primary-color: var(--color-primary-500);

  /* Secondary colors (Nero) — valori esistenti invariati; step extra per scala più fine */
  --color-secondary-950: #0A0A0A;
  --color-secondary-925: #0f0f0f;
  --color-secondary-900: #141414;
  --color-secondary-875: #191919;
  --color-secondary-850: #1e1e1e;
  --color-secondary-825: #232323;
  --color-secondary-800: #282828;
  --color-secondary-750: #323232;
  --color-secondary-700: #3C3C3C;
  --color-secondary-650: #464646;
  --color-secondary-600: #505050;
  --color-secondary-550: #595959;
  --color-secondary-500: #505050;
  --color-secondary-450: #6a6a6a;
  --color-secondary-400: #818181;
  --color-secondary-350: #8f8f8f;
  --color-secondary-300: #9E9E9E;
  --color-secondary-250: #c7c7c7;
  --color-secondary-200: #f0f0f0;
  --color-secondary-175: #f4f4f4;
  --color-secondary-150: #f9f9f9;
  --color-secondary-125: #f8f8f8;
  --color-secondary-100: #f6f6f6;

  /* Third colors (White) */
  --color-third-800: #818181;
  --color-third-700: #9E9E9E;
  --color-third-600: #BBBBBB;
  --color-third-500: #CACACA;
  --color-third-400: #D8D8D8;
  --color-third-300: #E7E7E7;
  --color-third-200: #EFEEEC;
  --color-third-150: #F2F2F0;
  --color-third-100: #ffffff;

  /* Message colors */
  --color-warning: #fff8d9;
  --color-success-bg: #ECFDF3;
  --color-success-border: #2e6a43;
  --color-error-bg: #FFD6DD;
  --color-error-border: #F26B7A;
  --color-info-bg: var(--color-primary-25);     /* #E7F0FE */
  --color-info-border: var(--color-primary-200);/* #A1C5FB */
  --color-warning-bg: #FFF7ED;
  --color-warning-border: #FED7AA;
  --color-neutral: var(--color-secondary-700);
  --color-neutral-bg: var(--color-secondary-150);
  --color-neutral-border: var(--color-secondary-200);

  /* Danger (elimina, azioni distruttive) */
  --color-danger-500: #ce4c4c;

  /* Success (toast conferme, stati OK) */
  --color-success-500: #15803d;

  /* Accent purple (hero graphic / shuffle UI) */
  --purple: #6248ff;
  --light-purple: rgba(98, 72, 255, 0.12);

  /* Sandbox /stage (body.body-stage) */
  --color-stage-bg: #f2efe9;
  /* Grigio chiaro neutro (#F2F2F0): alternativa allo stage default, riusabile altrove */
  --color-stage-neutral: #F2F2F0;
}

/* =========================
   TEXT COLORS
   ========================= */
.color-primary-800 { color: var(--color-primary-800); }
.color-primary-700 { color: var(--color-primary-700); }
.color-primary-600 { color: var(--color-primary-600); }
.color-primary-500 { color: var(--color-primary-500); }
.color-primary-400 { color: var(--color-primary-400); }
.color-primary-300 { color: var(--color-primary-300); }
.color-primary-200 { color: var(--color-primary-200); }
.color-primary-100 { color: var(--color-primary-100); }
.color-primary-50  { color: var(--color-primary-50); }
.color-primary-25  { color: var(--color-primary-25); }

.color-secondary-950 { color: var(--color-secondary-950); }
.color-secondary-925 { color: var(--color-secondary-925); }
.color-secondary-900 { color: var(--color-secondary-900); }
.color-secondary-875 { color: var(--color-secondary-875); }
.color-secondary-850 { color: var(--color-secondary-850); }
.color-secondary-825 { color: var(--color-secondary-825); }
.color-secondary-800 { color: var(--color-secondary-800); }
.color-secondary-750 { color: var(--color-secondary-750); }
.color-secondary-700 { color: var(--color-secondary-700); }
.color-secondary-650 { color: var(--color-secondary-650); }
.color-secondary-600 { color: var(--color-secondary-600); }
.color-secondary-550 { color: var(--color-secondary-550); }
.color-secondary-500 { color: var(--color-secondary-500); }
.color-secondary-450 { color: var(--color-secondary-450); }
.color-secondary-400 { color: var(--color-secondary-400); }
.color-secondary-350 { color: var(--color-secondary-350); }
.color-secondary-300 { color: var(--color-secondary-300); }
.color-secondary-250 { color: var(--color-secondary-250); }
.color-secondary-200 { color: var(--color-secondary-200); }
.color-secondary-175 { color: var(--color-secondary-175); }
.color-secondary-150 { color: var(--color-secondary-150); }
.color-secondary-125 { color: var(--color-secondary-125); }
.color-secondary-100 { color: var(--color-secondary-100); }

.color-third-800 { color: var(--color-third-800); }
.color-third-700 { color: var(--color-third-700); }
.color-third-600 { color: var(--color-third-600); }
.color-third-500 { color: var(--color-third-500); }
.color-third-400 { color: var(--color-third-400); }
.color-third-300 { color: var(--color-third-300); }
.color-third-200 { color: var(--color-third-200); }
.color-third-150 { color: var(--color-third-150); }
.color-third-100 { color: var(--color-third-100); }

.color-warning{ color: var(--color-warning); }
.color-neutral{ color: var(--color-neutral); }
.color-success-bg{ color: var(--color-success-bg); }
.color-success-border{ color: var(--color-success-border); }
.color-error-bg{ color: var(--color-error-bg); }
.color-error-border{ color: var(--color-error-border); }
.color-info-bg{ color: var(--color-info-bg); }
.color-info-border{ color: var(--color-info-border); }
.color-warning-bg{ color: var(--color-warning-bg); }
.color-warning-border{ color: var(--color-warning-border); }
.color-neutral-bg{ color: var(--color-neutral-bg); }
.color-neutral-border{ color: var(--color-neutral-border); }

.color-danger-500 { color: var(--color-danger-500); }
.color-success-500 { color: var(--color-success-500); }

/* =========================
   BACKGROUND COLORS
   ========================= */
.bg-color-primary-800 { background-color: var(--color-primary-800); }
.bg-color-primary-700 { background-color: var(--color-primary-700); }
.bg-color-primary-600 { background-color: var(--color-primary-600); }
.bg-color-primary-500 { background-color: var(--color-primary-500); }
.bg-color-primary-400 { background-color: var(--color-primary-400); }
.bg-color-primary-300 { background-color: var(--color-primary-300); }
.bg-color-primary-200 { background-color: var(--color-primary-200); }
.bg-color-primary-100 { background-color: var(--color-primary-100); }
.bg-color-primary-50  { background-color: var(--color-primary-50); }
.bg-color-primary-25  { background-color: var(--color-primary-25); }

.bg-color-secondary-950 { background-color: var(--color-secondary-950); }
.bg-color-secondary-925 { background-color: var(--color-secondary-925); }
.bg-color-secondary-900 { background-color: var(--color-secondary-900); }
.bg-color-secondary-875 { background-color: var(--color-secondary-875); }
.bg-color-secondary-850 { background-color: var(--color-secondary-850); }
.bg-color-secondary-825 { background-color: var(--color-secondary-825); }
.bg-color-secondary-800 { background-color: var(--color-secondary-800); }
/* Pubblicazione builder — shell dialog topbar (stesso token ovunque; sul root con .ui-select-panel-builder vedi publish/publish.css per la specificità) */
.publish-select-panel-root,
.bg-publish-select-panel {
  background-color: var(--color-secondary-800);
}
.bg-color-secondary-750 { background-color: var(--color-secondary-750); }
.bg-color-secondary-700 { background-color: var(--color-secondary-700); }
.bg-color-secondary-650 { background-color: var(--color-secondary-650); }
.bg-color-secondary-600 { background-color: var(--color-secondary-600); }
.bg-color-secondary-550 { background-color: var(--color-secondary-550); }
.bg-color-secondary-500 { background-color: var(--color-secondary-500); }
.bg-color-secondary-450 { background-color: var(--color-secondary-450); }
.bg-color-secondary-400 { background-color: var(--color-secondary-400); }
.bg-color-secondary-350 { background-color: var(--color-secondary-350); }
.bg-color-secondary-300 { background-color: var(--color-secondary-300); }
.bg-color-secondary-250 { background-color: var(--color-secondary-250); }
.bg-color-secondary-200 { background-color: var(--color-secondary-200); }
.bg-color-secondary-175 { background-color: var(--color-secondary-175); }
.bg-color-secondary-150 { background-color: var(--color-secondary-150); }
.bg-color-secondary-125 { background-color: var(--color-secondary-125); }
.bg-color-secondary-100 { background-color: var(--color-secondary-100); }

.bg-color-third-800 { background-color: var(--color-third-800); }
.bg-color-third-700 { background-color: var(--color-third-700); }
.bg-color-third-600 { background-color: var(--color-third-600); }
.bg-color-third-500 { background-color: var(--color-third-500); }
.bg-color-third-400 { background-color: var(--color-third-400); }
.bg-color-third-300 { background-color: var(--color-third-300); }
.bg-color-third-200 { background-color: var(--color-third-200); }
.bg-color-third-150 { background-color: var(--color-third-150); }
.bg-color-third-100 { background-color: var(--color-third-100); }

.bg-color-warning{ background-color: var(--color-warning); }
.bg-color-neutral{ background-color: var(--color-neutral); }
.bg-color-success-bg{ background-color: var(--color-success-bg); }
.bg-color-success-border{ background-color: var(--color-success-border); }
.bg-color-error-bg{ background-color: var(--color-error-bg); }
.bg-color-error-border{ background-color: var(--color-error-border); }
.bg-color-info-bg{ background-color: var(--color-info-bg); }
.bg-color-info-border{ background-color: var(--color-info-border); }
.bg-color-warning-bg{ background-color: var(--color-warning-bg); }
.bg-color-warning-border{ background-color: var(--color-warning-border); }
.bg-color-neutral-bg{ background-color: var(--color-neutral-bg); }
.bg-color-neutral-border{ background-color: var(--color-neutral-border); }

.bg-color-danger-500 { background-color: var(--color-danger-500); }
.bg-color-success-500 { background-color: var(--color-success-500); }

/* BORDER */
.border-color-success{ border-color: var(--color-success); }
.border-color-error{ border-color: var(--color-error); }
.border-color-info{ border-color: var(--color-info); }
.border-color-warning{ border-color: var(--color-warning); }
.border-color-neutral{ border-color: var(--color-neutral); }
.border-color-success-bg{ border-color: var(--color-success-bg); }
.border-color-success-border{ border-color: var(--color-success-border); }
.border-color-error-bg{ border-color: var(--color-error-bg); }
.border-color-error-border{ border-color: var(--color-error-border); }
.border-color-info-bg{ border-color: var(--color-info-bg); }
.border-color-info-border{ border-color: var(--color-info-border); }
.border-color-warning-bg{ border-color: var(--color-warning-bg); }
.border-color-warning-border{ border-color: var(--color-warning-border); }
.border-color-neutral-bg{ border-color: var(--color-neutral-bg); }
.border-color-neutral-border{ border-color: var(--color-neutral-border); }

/* =========================
   FILL COLORS (SVG)
   Usa queste classi su <svg> o su elementi interni (path, circle, ecc.)
   ========================= */
.fill-color-primary-800 { fill: var(--color-primary-800); }
.fill-color-primary-700 { fill: var(--color-primary-700); }
.fill-color-primary-600 { fill: var(--color-primary-600); }
.fill-color-primary-500 { fill: var(--color-primary-500); }
.fill-color-primary-400 { fill: var(--color-primary-400); }
.fill-color-primary-300 { fill: var(--color-primary-300); }
.fill-color-primary-200 { fill: var(--color-primary-200); }
.fill-color-primary-100 { fill: var(--color-primary-100); }
.fill-color-primary-50  { fill: var(--color-primary-50); }
.fill-color-primary-25  { fill: var(--color-primary-25); }

.fill-color-secondary-950 { fill: var(--color-secondary-950); }
.fill-color-secondary-925 { fill: var(--color-secondary-925); }
.fill-color-secondary-900 { fill: var(--color-secondary-900); }
.fill-color-secondary-875 { fill: var(--color-secondary-875); }
.fill-color-secondary-850 { fill: var(--color-secondary-850); }
.fill-color-secondary-825 { fill: var(--color-secondary-825); }
.fill-color-secondary-800 { fill: var(--color-secondary-800); }
.fill-color-secondary-750 { fill: var(--color-secondary-750); }
.fill-color-secondary-700 { fill: var(--color-secondary-700); }
.fill-color-secondary-650 { fill: var(--color-secondary-650); }
.fill-color-secondary-600 { fill: var(--color-secondary-600); }
.fill-color-secondary-550 { fill: var(--color-secondary-550); }
.fill-color-secondary-500 { fill: var(--color-secondary-500); }
.fill-color-secondary-450 { fill: var(--color-secondary-450); }
.fill-color-secondary-400 { fill: var(--color-secondary-400); }
.fill-color-secondary-350 { fill: var(--color-secondary-350); }
.fill-color-secondary-300 { fill: var(--color-secondary-300); }
.fill-color-secondary-250 { fill: var(--color-secondary-250); }
.fill-color-secondary-200 { fill: var(--color-secondary-200); }
.fill-color-secondary-175 { fill: var(--color-secondary-175); }
.fill-color-secondary-150 { fill: var(--color-secondary-150); }
.fill-color-secondary-125 { fill: var(--color-secondary-125); }
.fill-color-secondary-100 { fill: var(--color-secondary-100); }

.fill-color-third-800 { fill: var(--color-third-800); }
.fill-color-third-700 { fill: var(--color-third-700); }
.fill-color-third-600 { fill: var(--color-third-600); }
.fill-color-third-500 { fill: var(--color-third-500); }
.fill-color-third-400 { fill: var(--color-third-400); }
.fill-color-third-300 { fill: var(--color-third-300); }
.fill-color-third-200 { fill: var(--color-third-200); }
.fill-color-third-150 { fill: var(--color-third-150); }
.fill-color-third-100 { fill: var(--color-third-100); }

.fill-color-warning{ fill: var(--color-warning); }
.fill-color-neutral{ fill: var(--color-neutral); }
.fill-color-success-bg{ fill: var(--color-success-bg); }
.fill-color-success-border{ fill: var(--color-success-border); }
.fill-color-error-bg{ fill: var(--color-error-bg); }
.fill-color-error-border{ fill: var(--color-error-border); }
.fill-color-info-bg{ fill: var(--color-info-bg); }
.fill-color-info-border{ fill: var(--color-info-border); }
.fill-color-warning-bg{ fill: var(--color-warning-bg); }
.fill-color-warning-border{ fill: var(--color-warning-border); }
.fill-color-neutral-bg{ fill: var(--color-neutral-bg); }
.fill-color-neutral-border{ fill: var(--color-neutral-border); }

.fill-color-danger-500 { fill: var(--color-danger-500); }
.fill-color-success-500 { fill: var(--color-success-500); }

/* =========================
   VARIAZIONI
   ========================= */
.vr-hover-text {
  transition: 0.5s;
  color: var(--color-secondary-300);
}
.vr-hover-text:hover {
  transition: 0.5s;
  color: var(--color-third-100);
}
.ds-hover-text{
  transition: color 0.1s;
  color: var(--color-secondary-500);
}
.ds-hover-text:hover{
  color: var(--color-secondary-950);
}
.ds-hover-text p{
  color: inherit;
}
.ds-fill-hover-text svg{
  fill: currentColor;
}
.ds-fill-hover-text use{
  fill: currentColor;
}