/* ============================================================================
 * Extra Archivet — Design Tokens
 * ----------------------------------------------------------------------------
 * Linguaggio visivo unico della Suite Archivet.
 * Allineato 1:1 al Design System nato in Extra.Archivet.IDP
 * (Docs/UI/design-system.md — fonte di verità).
 *
 * Tema istituzionale: "archivet" (arancio Extra + grigio acciaio + oro).
 * Temi utente opzionali: bosco, oceano, tramonto, lavanda, sabbia, grafite, notte.
 *
 * Convenzione: variabili semantiche (--accent, --bg, --text, --space-*, ...).
 * Le vecchie variabili --as-* sono mantenute come alias retrocompatibili
 * per non rompere componenti esistenti che le usano (MainLayout.razor, ecc.).
 * ========================================================================== */

/* ---- DESIGN TOKENS comuni a tutti i temi ---- */
:root {
    /* Spacing scale (base 4px) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Typography scale */
    --text-xs: .75rem;
    --text-sm: .85rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.75rem;
    --text-hero: 3.75rem;

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-loose: 1.75;

    --font-display: 'DM Serif Display', Georgia, serif;
    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Geometry */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --border-w: 1px;
    --border-w-2: 2px;

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-1: 150ms;
    --dur-2: 200ms;
    --dur-3: 300ms;

    /* ---- Alias retrocompatibili --as-* (legacy Hub) ---- */
    --as-space-0: 0;
    --as-space-1: var(--space-1);
    --as-space-2: var(--space-2);
    --as-space-3: var(--space-3);
    --as-space-4: var(--space-4);
    --as-space-5: var(--space-6);
    --as-space-6: var(--space-8);
    --as-space-8: var(--space-12);

    --as-font-family-base: var(--font-sans);
    --as-font-family-mono: var(--font-mono);

    --as-font-size-xs: var(--text-xs);
    --as-font-size-sm: var(--text-sm);
    --as-font-size-base: var(--text-base);
    --as-font-size-lg: var(--text-lg);
    --as-font-size-xl: var(--text-xl);
    --as-font-size-2xl: var(--text-2xl);
    --as-font-size-3xl: var(--text-3xl);

    --as-font-weight-regular: 400;
    --as-font-weight-medium: 500;
    --as-font-weight-semibold: 600;
    --as-font-weight-bold: 700;

    --as-line-height-tight: var(--leading-tight);
    --as-line-height-base: var(--leading-normal);

    --as-radius-sm: var(--radius-sm);
    --as-radius-md: var(--radius);
    --as-radius-lg: var(--radius-lg);
    --as-radius-pill: var(--radius-pill);

    --as-container-max: 1280px;
    --as-header-height: 56px;
    --as-sidebar-width: 250px;

    --as-duration-fast: var(--dur-1);
    --as-duration-base: var(--dur-2);
    --as-easing-standard: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-1: .001ms; --dur-2: .001ms; --dur-3: .001ms; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---- THEME TOKENS: ARCHIVET (default istituzionale) ---- */
:root,
:root[data-theme="archivet"] {
    /* Surfaces */
    --bg: #fbf9f6;
    --bg2: #f3eee7;
    --surface: #ffffff;
    --surface2: #faf8f5;
    --border: #e2dcd1;

    /* Brand */
    --accent: #c2671a;
    --accent2: #f58220;
    --accent-light: #fde8d4;

    /* Neutri strutturali (grigio acciaio del logo Extra) */
    --steel: #727d84;
    --steel-dark: #4a5358;
    --steel-light: #d8dde0;

    /* Stati */
    --success: #2d6a4f;
    --success-light: #d8f3dc;
    --warning: #a05c00;
    --warning-light: #fef3c7;
    --danger: #9b2335;
    --danger-light: #fce4e7;
    --info: #1d6fa5;
    --info-light: #d6ebf7;

    /* Tipografia */
    --text: #1c1917;
    --text2: #4a5358;
    --text3: #98a0a6;

    /* Accenti firma */
    --gold: #c9a84c;
    --gold-light: #fdf6e3;

    /* Ombre */
    --shadow-sm: 0 1px 3px rgba(28,25,23,.06);
    --shadow-md: 0 4px 16px rgba(28,25,23,.08);
    --shadow-lg: 0 12px 32px rgba(28,25,23,.14);
    --shadow-focus: 0 0 0 3px var(--accent-light);
    --transition: var(--dur-2) var(--ease);

    /* ---- Alias --as-color-* (legacy Hub) ---- */
    --as-color-primary: var(--accent2);
    --as-color-primary-50: var(--accent-light);
    --as-color-primary-100: var(--accent-light);
    --as-color-primary-600: var(--accent);
    --as-color-primary-700: var(--accent);
    --as-color-accent: var(--gold);
    --as-color-success: var(--success);
    --as-color-warning: var(--warning);
    --as-color-danger: var(--danger);
    --as-color-info: var(--info);
    --as-color-bg: var(--bg);
    --as-color-bg-muted: var(--bg2);
    --as-color-surface: var(--surface);
    --as-color-border: var(--border);
    --as-color-text: var(--text);
    --as-color-text-muted: var(--text2);

    --as-shadow-sm: var(--shadow-sm);
    --as-shadow-md: var(--shadow-md);
    --as-shadow-lg: var(--shadow-lg);
}

/* ---- THEME TOKENS: BOSCO (verde, opzione utente) ---- */
:root[data-theme="bosco"] {
    --bg: #f4f1ec;
    --bg2: #ede9e1;
    --surface: #ffffff;
    --surface2: #fafaf8;
    --border: #ddd8ce;
    --accent: #1a4731;
    --accent2: #2d6a4f;
    --accent-light: #d8f3dc;
    --steel: #57534e;
    --steel-dark: #3a3633;
    --steel-light: #c9c2b9;
    --danger: #9b2335;
    --danger-light: #fce4e7;
    --warning: #a05c00;
    --warning-light: #fef3c7;
    --success: #2d6a4f;
    --success-light: #d8f3dc;
    --info: #1d6fa5;
    --info-light: #d6ebf7;
    --text: #1c1917;
    --text2: #57534e;
    --text3: #a8a29e;
    --gold: #c9a84c;
    --gold-light: #fdf6e3;
    --shadow-focus: 0 0 0 3px rgba(45,106,79,.18);
}

/* ---- THEME: OCEANO ---- */
:root[data-theme="oceano"] {
    --bg: #eef4f8;
    --bg2: #e2ecf2;
    --surface: #ffffff;
    --surface2: #f7fafc;
    --border: #cfdde6;
    --accent: #0b3d5c;
    --accent2: #1d6fa5;
    --accent-light: #d6ebf7;
    --danger: #9b2335;
    --danger-light: #fce4e7;
    --warning: #a05c00;
    --warning-light: #fef3c7;
    --text: #0f1d2a;
    --text2: #4a5b6b;
    --text3: #8fa1b0;
    --gold: #2bb5b8;
    --gold-light: #d8f4f5;
}

/* ---- THEME: TRAMONTO ---- */
:root[data-theme="tramonto"] {
    --bg: #fbf3ec;
    --bg2: #f6e8db;
    --surface: #ffffff;
    --surface2: #fef9f4;
    --border: #ecd9c5;
    --accent: #8a2f1f;
    --accent2: #d2542d;
    --accent-light: #fde4d3;
    --danger: #a01e2a;
    --danger-light: #fce0e3;
    --warning: #8a5a00;
    --warning-light: #fef0c7;
    --text: #2b1a14;
    --text2: #6b4f44;
    --text3: #b09a8e;
    --gold: #c98b2a;
    --gold-light: #fdf0d8;
}

/* ---- THEME: GRAFITE (dark mode neutro) ---- */
:root[data-theme="grafite"] {
    --bg: #15171a;
    --bg2: #1c1f23;
    --surface: #22262b;
    --surface2: #2a2f35;
    --border: #353b42;
    --accent: #8fb3a3;
    --accent2: #a5c8b8;
    --accent-light: #2c3a35;
    --danger: #f0707f;
    --danger-light: #4a2329;
    --warning: #e7a85a;
    --warning-light: #4a3722;
    --text: #f0ede6;
    --text2: #c2bdb3;
    --text3: #7a766f;
    --gold: #d4b769;
    --gold-light: #3d3520;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ---- THEME: LAVANDA ---- */
:root[data-theme="lavanda"] {
    --bg: #f5f1f8;
    --bg2: #ece5f3;
    --surface: #ffffff;
    --surface2: #faf7fc;
    --border: #ddd2e8;
    --accent: #4b2a7a;
    --accent2: #7a4caf;
    --accent-light: #ece1f8;
    --danger: #9b2335;
    --danger-light: #fce4e7;
    --warning: #a05c00;
    --warning-light: #fef3c7;
    --text: #1f1226;
    --text2: #524563;
    --text3: #9b8eaa;
    --gold: #c89b3c;
    --gold-light: #fbf2d9;
}

/* ---- THEME: SABBIA ---- */
:root[data-theme="sabbia"] {
    --bg: #faf6ee;
    --bg2: #f1ead7;
    --surface: #ffffff;
    --surface2: #fdfaf1;
    --border: #e3d8ba;
    --accent: #6b4d1a;
    --accent2: #a87a2c;
    --accent-light: #f5e9c6;
    --danger: #9b2335;
    --danger-light: #fce4e7;
    --warning: #a05c00;
    --warning-light: #fef3c7;
    --text: #2a1f10;
    --text2: #5e4d33;
    --text3: #a89880;
    --gold: #b88a2b;
    --gold-light: #fbf0c8;
}

/* ---- THEME: NOTTE (dark blu profondo) ---- */
:root[data-theme="notte"] {
    --bg: #0e1726;
    --bg2: #15203a;
    --surface: #1a2742;
    --surface2: #21304f;
    --border: #2c3a5c;
    --accent: #7eb6ff;
    --accent2: #a3cdff;
    --accent-light: #1f3258;
    --danger: #f0707f;
    --danger-light: #4a2329;
    --warning: #ffba5c;
    --warning-light: #4a3722;
    --text: #eaf0fa;
    --text2: #b8c4dd;
    --text3: #6c7a98;
    --gold: #ffcb6b;
    --gold-light: #3d3520;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
    --shadow-md: 0 4px 16px rgba(0,0,0,.6);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.7);
}