/* ============================================================
   BASE.CSS — Training Design System
   Copia questo file in ogni nuovo progetto come style.css
   Aggiungi stili specifici del progetto in fondo.
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --color-bg:        var(--c-bg);
  --color-sidebar:   var(--c-sidebar);
  --color-border:    var(--c-border);
  --color-border-md: var(--c-track);
  --color-border-lg: var(--c-muted);
  --color-text-muted:   var(--c-muted);
  --color-text-sub:     var(--c-sec);
  --color-text:         var(--c-primary);
  --color-accent:       var(--c-white);
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

/* --- Scrollbar ---------------------------------------------- */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--color-border-md); border-radius: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--color-border-lg); }

/* --- Focus -------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-text-sub); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

/* --- Select ------------------------------------------------- */
select { -webkit-appearance: none; appearance: none; }

/* --- Range slider ------------------------------------------ */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 12px; width: 12px; border-radius: 50%;
  background: var(--color-accent); cursor: pointer; margin-top: -5px;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%; height: 2px; cursor: pointer; background: var(--color-border-md);
}
input[type="range"]::-moz-range-track {
  width: 100%; height: 2px; cursor: pointer; background: var(--color-border-md); border: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-accent); border: 0; cursor: pointer;
}
input[type="range"]:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- Color input ------------------------------------------- */
.color-input {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px;
  border: 1px solid var(--color-border-md); border-radius: 4px;
  padding: 0; cursor: pointer; background: none; flex-shrink: 0;
}
.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.color-input::-moz-color-swatch { border: none; border-radius: 2px; }

/* --- Toast -------------------------------------------------- */
#toast {
  position: fixed; right: 14px; bottom: 14px;
  background: var(--c-border); border: 1px solid var(--c-track);
  color: var(--c-primary); font-size: 11px;
  padding: 7px 12px; border-radius: 6px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 100;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* --- Canvas container -------------------------------------- */
#canvasWrap { cursor: default; }
#canvasWrap canvas { display: block; }

/* ============================================================
   PROJECT-SPECIFIC — aggiungi sotto questa riga
   ============================================================ */

/* --- Form controls ------------------------------------------ */
textarea, select, .hex-input {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--color-border-md);
  border-radius: 6px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 10px;
  transition: border-color .2s;
}
textarea:hover, select:hover, .hex-input:hover { border-color: var(--color-border-lg); }
textarea { resize: vertical; min-height: 76px; line-height: 1.5; }

select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.hex-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

input[type="checkbox"] {
  accent-color: var(--color-text);
  width: 14px; height: 14px;
  cursor: pointer; flex-shrink: 0;
}

/* --- Canvas ------------------------------------------------- */
#canvasWrap { outline: 1px solid var(--color-border); }

/* --- Bottoni segmentati (formato) --------------------------- */
.seg {
  padding: 6px 0;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  background: var(--c-bg);
  border: 1px solid var(--color-border-md);
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.seg:hover { color: var(--color-text); border-color: var(--color-border-lg); }
.seg.active { background: var(--color-text); border-color: var(--color-text); color: var(--c-bg); }