/*
 * Variabili di tema di SDS.Components.
 * Ogni componente legge SOLO queste variabili --sds-*, mai colori scritti a mano:
 * un tema e' semplicemente un altro set di valori per gli stessi nomi.
 *
 * Temi inclusi: dark (predefinito) e light. Si sceglie con data-theme="light" su un
 * elemento antenato (di solito tramite <SdsThemeProvider Theme="light">), oppure si
 * sovrascrive una singola variabile nel CSS dell'app, es. :root { --sds-color-accent: #ff5a5f; }
 */

/* Gli stili dei pulsanti di base, condivisi da più componenti (vedi il commento in sds-buttons.css) */
@import url("sds-buttons.css");

:root,
[data-theme="dark"] {
    /* Superfici */
    --sds-color-bg: #0f1016;
    --sds-color-surface: #181a24;
    --sds-color-surface-raised: #222533;
    --sds-color-border: #2e3243;

    /* Testo */
    --sds-color-text: #f2f3f7;
    --sds-color-text-muted: #9a9fb2;
    --sds-color-text-on-accent: #ffffff;
    --sds-color-text-on-warning: #1a1300;
    --sds-color-text-on-muted: #0f1016;

    /* Colore del brand e stati */
    --sds-color-accent: #6c7bff;
    --sds-color-accent-hover: #8390ff;
    --sds-color-success: #2fcf8a;
    --sds-color-warning: #f5b544;
    --sds-color-danger: #ff5a6a;

    /* Chart palette: series take these colors in order, then start again */
    --sds-chart-1: #6c7bff;
    --sds-chart-2: #2fcf8a;
    --sds-chart-3: #f5b544;
    --sds-chart-4: #ff5a6a;
    --sds-chart-5: #4dc8f0;
    --sds-chart-6: #c084fc;
    --sds-chart-7: #f47fb5;
    --sds-chart-8: #9bd35a;

    /* Forme (raggi degli angoli) */
    --sds-radius-sm: 6px;
    --sds-radius-md: 12px;
    --sds-radius-lg: 20px;
    --sds-radius-pill: 999px;

    /* Scala degli spazi */
    --sds-space-1: 4px;
    --sds-space-2: 8px;
    --sds-space-3: 12px;
    --sds-space-4: 16px;
    --sds-space-5: 24px;
    --sds-space-6: 32px;

    /* Tipografia */
    --sds-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sds-font-size-sm: 0.8125rem;
    --sds-font-size-md: 1rem;
    --sds-font-size-lg: 1.25rem;

    /* Effetti */
    --sds-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --sds-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
    --sds-transition: 160ms ease;

    /* Paper (report pages): the same in every theme, because it stands for a printed sheet */
    --sds-paper: #ffffff;
    --sds-paper-ink: #16181f;
    --sds-paper-muted: #5c6070;
    --sds-paper-border: #d4d7e0;
    --sds-paper-shade: #f1f2f6;
    --sds-paper-accent: #3546e6;

    /* Sovrapposizioni */
    --sds-color-overlay: rgba(5, 6, 10, 0.7);
    --sds-z-popup: 900;    /* elenchi a comparsa (suggerimenti): sopra il contenuto, sotto le modali */
    --sds-z-modal: 1000;
    --sds-z-loading: 1050; /* sopra le modali, sotto i toast */
    --sds-z-toast: 1100;   /* sopra le modali: una notifica deve restare visibile anche a modale aperta */
}

[data-theme="light"] {
    --sds-color-bg: #f5f6fa;
    --sds-color-surface: #ffffff;
    --sds-color-surface-raised: #eef0f6;
    --sds-color-border: #d9dce6;

    --sds-color-text: #14161f;
    --sds-color-text-muted: #6a6f82;
    --sds-color-text-on-accent: #ffffff;
    --sds-color-text-on-muted: #ffffff;

    --sds-color-accent: #4a5bff;
    --sds-color-accent-hover: #3546e6;
    --sds-color-success: #14a86b;
    --sds-color-warning: #d98f16;
    --sds-color-danger: #e03446;

    --sds-chart-1: #4a5bff;
    --sds-chart-2: #14a86b;
    --sds-chart-3: #d98f16;
    --sds-chart-4: #e03446;
    --sds-chart-5: #1f9fcf;
    --sds-chart-6: #9a4fe0;
    --sds-chart-7: #d9508f;
    --sds-chart-8: #6ea82d;

    --sds-shadow-md: 0 6px 20px rgba(20, 22, 31, 0.12);
    --sds-shadow-lg: 0 20px 60px rgba(20, 22, 31, 0.25);
    --sds-color-overlay: rgba(20, 22, 31, 0.45);
}

/* Il contenitore del provider dipinge la superficie di base, cosi' i figli ereditano i colori del tema. */
.sds-theme {
    background: var(--sds-color-bg);
    color: var(--sds-color-text);
    font-family: var(--sds-font-family);
    font-size: var(--sds-font-size-md);
}