/*
 * Solaris Design Tokens — sorgente di verità per palette + typography.
 * Questo file è duplicato in Solaris.Web/wwwroot/design-tokens.css: tenerli allineati.
 * Estratti da Figma: file "Website" (hiT2W2h5ogWzkY72m4K0DR), nodi 282-416 (Typo) e 287-1131 (Color Palette).
 */

:root {
    /* === Colors (Figma palette) === */
    --color-bg-page: #FAFAFA;
    --color-bg-element: #FFFFFF;
    --color-primary: #3A8B68;
    --color-primary-dark: #2B664C;
    --color-text-white: #FAFAFA;
    --color-text-black: #2E2E2E;
    --color-text-inactive: #6B6B6B;
    --color-grey: #CCCCC8;
    --color-grey-light: #F6F7F4;
    --color-danger: #C8432C;
    --color-accent: #FEA90D;
    --color-accent-dark: #E5990C; /* Figma CTA Tertiary hover */
    --color-info: #0284C7; /* non Figma — standard info */

    /* === Elevations (Figma M3/Elevation Light/2) === */
    --shadow-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);

    /* === Field shadow (Figma "Field Shadow" — focus ring verde 10%) === */
    --shadow-field: 0 0 0 4px rgba(58, 139, 104, 0.1);

    /* Shadow morbide per segmenti switcher attivi e container scatola */
    --shadow-soft-primary: 0 2px 6px -2px rgba(58, 139, 104, 0.3);
    --shadow-soft-accent: 0 2px 6px -2px rgba(254, 169, 13, 0.3);
    --shadow-container-soft: 0 1px 1px rgba(0, 0, 0, 0.05);

    /* === Dark night (variante Notte dello switch Fascia) === */
    --color-dark-night: #253F46;

    /* === Components === */
    --radius-button: 10px;
    --radius-field: 10px;
    --radius-chip: 8px;
    --radius-pill: 100px;

    /* === Font families === */
    --ff-display: "Space Grotesk", "Helvetica", "Arial", sans-serif;
    --ff-body: "Inter", "Helvetica", "Arial", sans-serif;

    /* === Font sizes (desktop) — allineati Figma node 282-416 === */
    --fs-h1: 32px;          /* Space Grotesk Bold 32/28 */
    --fs-h2: 28px;          /* Space Grotesk Bold 28/24 */
    --fs-h3: 24px;          /* Space Grotesk Medium 24/20 */
    --fs-h4: 22px;          /* gradino tra H3 e Text XL (non-Figma, interno) */
    --fs-text-xl: 20px;     /* MudBlazor Typo.h5 — Inter Bold 20 */
    --fs-text-l: 18px; /* MudBlazor Typo.h6 */
    --fs-body: 16px; /* Typo.body1 */
    --fs-cta: 16px; /* Typo.button */
    --fs-placeholder: 16px;
    --fs-label-field: 16px; /* Typo.input */
    --fs-label-space-xl: 16px;
    --fs-label-space-l: 16px; /* Typo.subtitle1 */
    --fs-text-s: 14px; /* Typo.body2 */
    --fs-label-space-m: 14px; /* Typo.subtitle2 */
    --fs-label-space-s: 12px; /* Typo.caption */

    /* === Line heights === */
    --lh-tight: 1.2;
    --lh-snug: 1.3;
    --lh-relaxed: 1.4;
}

@media (max-width: 768px) {
    :root {
        --fs-h1: 28px;          /* Mobile H1 */
        --fs-h2: 24px;          /* Mobile H2 */
        --fs-h3: 20px;          /* Mobile H3 */
        --fs-h4: 18px;          /* Mobile H4 (interno) */
        --fs-body: 14px;
        --fs-label-field: 14px;
    }
}

/* === Utility classes (token Figma senza Typo MudBlazor equivalente) === */
.solaris-text-s-bold {
    font-family: var(--ff-body);
    font-size: var(--fs-text-s);
    font-weight: 700;
    line-height: var(--lh-snug);
}

.solaris-text-placeholder {
    font-family: var(--ff-body);
    font-size: var(--fs-placeholder);
    font-weight: 500;
    line-height: var(--lh-relaxed);
}

.solaris-label-xl {
    font-family: var(--ff-display);
    font-size: var(--fs-label-space-xl);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.solaris-label-field {
    font-family: var(--ff-body);
    font-size: var(--fs-label-field);
    font-weight: 500;
    line-height: var(--lh-tight);
}