:root {
    /* ==================== PALETTE ==================== */
    --bg-color: #FDFBEB;
    --black: #000000;

    --color-verde: #aec2a1;
    --color-azzurro: #acc8ce;
    --color-giallo: #eee1ad;
    --color-viola: #C9B6E4;

    --color-error: #e06b6b;
    --color-success: #6b9a5b;
    --color-btn: #aec2a1;
    --color-cloud: #acc8ce;
    --color-text-muted: #555;

    /* Badge semantici */
    --color-badge-low: #b8e6c1;
    --color-badge-mid: #eee1ad;
    --color-badge-high: #e89a9a;

    /* Typography */
    --font-display: 'Epilogue', sans-serif;
    --font-body: 'Figtree', sans-serif;
}

/* ==================== RESET ==================== */
html {
    overflow-y: scroll;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    font-family: var(--font-body);
    color: var(--black);
    min-height: 100vh;
}

/* ==================== BLOCCO SCROLL (navbar aperta, modali) ==================== */
body.no-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    touch-action: none;
}

/* ==================== ALPINE.JS ==================== */
[x-cloak] {
    display: none !important;
}