@charset "UTF-8";

:root {
    /* === Palette principale === */
    --color-bg: #f6ebe7;
    --color-bg-dark: #6a4e42;
    --color-sidebar: #e1d9d1;
    --color-border: gray;
    --color-border-hover: black;
    --color-overlay-bg:  rgba(0, 0, 0, 0.2);
    --color-overlay-bg-soft:  rgba(0, 0, 0, 0.05);

    /* testo principale (body, navbar) */
    --color-text-body: #333;
    /* testo nella sidebar (sfondo scuro o contrastato) */
    --color-text-sidebar: white;
    --color-text-heading: #3b2e2a;
    /* usato anche in elementi decorativi o link footer */
    --color-text-heading-alt: #772707;

    --color-link: #0067b3;
    --color-muted: #666666;
    --color-primary: #904e33;

    /* === Componenti UI === */
    --color-header-bg: #fffeee;
    --color-footer-text: gray;
    --color-gradient-top: #d3c1b7;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.2);
    --shadow-hard: 0 6px 6px rgba(0, 0, 0, 0.3);

    /* === Sidebar === */
    /* bordo destro (trasparente) */
    --color-sidebar-border: rgba(119, 39, 7, 0.59);
    /* sfondo link hover/attivo */
    --color-sidebar-hover-bg: rgba(119, 39, 7, 0.21);
    /* link in basso nella sidebar */
    --color-sidebar-footer-link: #772808;
    --color-dropdown-text: #333;
    --color-dropdown-bg: white;

    /* === Alert === */
    --color-alert-info: #0067b3;
    --color-alert-success: #00a043;
    --color-alert-warning: #ffa117;
    --color-alert-error: red;
    --color-alert-flash: #772707;

    /* === Popup === */
    --color-popup-border: rgba(119, 39, 7, 0.59);
    --color-popup-bg: #f6ebe7;
    --color-popup-info: #0067b3;
    --color-popup-success: #00a043;
    --color-popup-warning: #ffa117;
    --color-popup-error: red;
    --color-popup-title: #333;
    --color-popup-text: #333;

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}


/* @media (prefers-color-scheme: dark), */
[data-theme="dark"] {
    /* === Palette principale === */
    --color-bg: #1e1a18;
    --color-bg-dark: #0f0c0a;
    --color-sidebar: #2a2421;
    --color-border: lightgray;
    --color-border-hover: white;

    --color-text-body: #ddd;
    --color-text-sidebar: #f8f8f8;
    --color-text-heading: #f0e6dc;
    --color-text-heading-alt: #ff915a;

    --color-link: #5eb7ff;
    --color-muted: #666666;

    /* === Componenti UI === */
    --color-header-bg: #2c2623;
    --color-footer-text: #999;
    --color-gradient-top: #3a2e28;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.6);
    --shadow-hard: 0 6px 6px rgba(0, 0, 0, 0.7);

    /* === Sidebar === */
    --color-sidebar-border: rgba(255, 255, 255, 0.6);
    --color-sidebar-hover-bg: rgba(255, 255, 255, 0.4);
    --color-sidebar-footer-link: #d8cac1;
    --color-dropdown-text: #ddd;
    --color-dropdown-bg: black;

    /* === Alert === */
    --color-alert-info: #50aeff;
    --color-alert-success: #2fb45a;
    --color-alert-warning: #fed175;
    --color-alert-error: #ff4c4c;
    --color-alert-flash: #ff915a;
}

.img-light,
.img-dark {
    display: none;
    max-width: 100%;
    height: auto;
}

/* Mostra immagine chiara solo se NON tema scuro */
html:not([data-theme="dark"]) .img-light {
    display: block;
}

/* Mostra immagine scura solo se tema scuro */
html[data-theme="dark"] .img-dark {
    display: block;
    filter: brightness(1.1);
}