/*
 * Sistema visivo dell'applicazione (specifica 033).
 * Unico punto in cui si definiscono spaziature, raggi, superfici e stati: pagine e componenti usano solo
 * var(--app-*) e i token Fluent 2 (--color*, --font*, --stroke*). Cambiare un valore qui lo cambia ovunque.
 * I token Fluent seguono il tema chiaro/scuro, quindi anche questi li seguono.
 */
:root {
    /* Scala di spaziature a 4 px */
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 24px;
    --app-space-6: 32px;

    /* Forma */
    --app-radius: var(--borderRadiusMedium);
    --app-stroke-width: var(--strokeWidthThin);

    /* Superfici e testi */
    --app-surface: var(--colorNeutralBackground1);
    --app-surface-subtle: var(--colorNeutralBackground2);
    --app-surface-hover: var(--colorSubtleBackgroundHover);
    --app-stroke: var(--colorNeutralStroke2);
    --app-text: var(--colorNeutralForeground1);
    --app-text-muted: var(--colorNeutralForeground3);
    --app-accent: var(--colorBrandForeground1);

    /* Dimensione del testo (specifica 034): fattore scelto dall'utente (0,7 ... 1,3). Lo imposta lo script di index.html e poi
       TextSizePreferenceService sull'elemento <html>; vale 1 quando non c'è una preferenza. */
    --app-text-scale: 1;

    /* Densità: le altezze che contengono testo crescono con il fattore, foto e icone no */
    --app-row-height: calc(32px * var(--app-text-scale));
    /* Pulsanti e campi crescono con il testo ma non scendono sotto la dimensione a 100% (bersaglio da toccare e coerenza con le select) */
    --app-control-h: max(32px, calc(32px * var(--app-text-scale)));
    --app-input-h: max(34px, calc(34px * var(--app-text-scale)));
    --app-header-h: calc(56px * var(--app-text-scale));
    --app-footer-h: calc(36px * var(--app-text-scale));
    --app-avatar: 40px;
    --app-chip-min-width: 9.5rem;

    /* Griglie e tessere (specifica 035): unico aspetto per la tabella di Rendicontazione e la Vista Settimanale della Presenza */
    --app-grid-head-bg: var(--app-surface-subtle);
    --app-grid-head-fg: var(--colorNeutralForeground1);
    --app-grid-row-alt: color-mix(in srgb, var(--app-surface-subtle) 55%, var(--app-surface));
    --app-grid-today-bg: var(--colorBrandBackground2);
    --app-grid-today-fg: var(--colorBrandForeground1);
    --app-grid-row-h: calc(28px * var(--app-text-scale));
    /* La tessera non scende sotto 40 px nemmeno al 70%: resta un bersaglio da toccare */
    --app-tile-min-h: max(40px, calc(44px * var(--app-text-scale)));
    --app-tile-cols: 5;

    /* Stati (sfondo tenue, bordo e testo) */
    --app-state-success: var(--colorStatusSuccessForeground1);
    --app-state-success-bg: var(--colorStatusSuccessBackground1);
    --app-state-warning: var(--colorStatusWarningForeground1);
    --app-state-warning-bg: var(--colorStatusWarningBackground1);
    --app-state-danger: var(--colorStatusDangerForeground1);
    --app-state-danger-bg: var(--colorStatusDangerBackground1);
    --app-state-info: var(--colorBrandForeground1);
    --app-state-info-bg: var(--colorBrandBackground2);
}

/*
 * Token tipografici di Fluent moltiplicati per il fattore di dimensione del testo (specifica 034).
 * "html body": la v5 imposta questi token sul body con un foglio di stile adottato, che altrimenti prevale.
 * I valori base sono quelli del tema Fluent 2 a 100%.
 */
html body {
    --fontSizeBase100: calc(10px * var(--app-text-scale));
    --fontSizeBase200: calc(12px * var(--app-text-scale));
    --fontSizeBase300: calc(14px * var(--app-text-scale));
    --fontSizeBase400: calc(16px * var(--app-text-scale));
    --fontSizeBase500: calc(20px * var(--app-text-scale));
    --fontSizeBase600: calc(24px * var(--app-text-scale));
    --fontSizeHero700: calc(28px * var(--app-text-scale));
    --fontSizeHero800: calc(32px * var(--app-text-scale));
    --fontSizeHero900: calc(40px * var(--app-text-scale));
    --fontSizeHero1000: calc(68px * var(--app-text-scale));

    --lineHeightBase100: calc(14px * var(--app-text-scale));
    --lineHeightBase200: calc(16px * var(--app-text-scale));
    --lineHeightBase300: calc(20px * var(--app-text-scale));
    --lineHeightBase400: calc(22px * var(--app-text-scale));
    --lineHeightBase500: calc(28px * var(--app-text-scale));
    --lineHeightBase600: calc(32px * var(--app-text-scale));
    --lineHeightHero700: calc(36px * var(--app-text-scale));
    --lineHeightHero800: calc(40px * var(--app-text-scale));
    --lineHeightHero900: calc(52px * var(--app-text-scale));
    --lineHeightHero1000: calc(92px * var(--app-text-scale));
}