:root {
    --mono-base: #5d5d5d;
    --mono-050: #f4f4f4;
    --mono-100: #e8e8e8;
    --mono-200: #d0d0d0;
    --mono-300: #b5b5b5;
    --mono-400: #989898;
    --mono-500: #7d7d7d;
    --mono-600: #636363;
    --mono-700: #4b4b4b;
    --mono-800: #343434;
    --mono-900: #1f1f1f;
}

/* Tema monocromatico "safe":
   - niente filtri sul body (causano artefatti e glitch UI)
   - palette via variabili CSS
   - desaturazione solo media/icone */
html[data-theme="monochrome"] {
    color-scheme: dark;
    background: var(--mono-900);
    --bg-primary: var(--mono-900);
    --bg-secondary: var(--mono-800);
    --text-primary: var(--mono-050);
    --text-secondary: var(--mono-300);
    --accent-color: var(--mono-base);
    --accent-color-rgb: 125, 125, 125;
    --border-color: var(--mono-600);
}

html[data-theme="monochrome"] body {
    background: linear-gradient(135deg, var(--mono-900) 0%, var(--mono-700) 100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll !important;
    color: var(--text-primary);
    min-height: 100vh;
}

html[data-theme="monochrome"] a {
    color: var(--mono-200);
}

html[data-theme="monochrome"] button,
html[data-theme="monochrome"] .btn,
html[data-theme="monochrome"] input[type="button"],
html[data-theme="monochrome"] input[type="submit"] {
    border-color: var(--mono-600);
}

html[data-theme="monochrome"] input,
html[data-theme="monochrome"] textarea,
html[data-theme="monochrome"] select {
    border-color: var(--mono-600);
}

html[data-theme="monochrome"] img,
html[data-theme="monochrome"] svg,
html[data-theme="monochrome"] video,
html[data-theme="monochrome"] canvas {
    filter: grayscale(1) contrast(1.04);
}