/* ============================================================ LAS — Design Token Unica fonte di verità per colori, tipografia, spaziature. Caricare PRIMA di theme.css. Nessun valore hardcoded altrove. ============================================================ */ :root { /* ---- Colore primario (petrolio) ---- */ --las-primary: #14586c; --las-primary-hover: #0f4757; --las-primary-active: #0b3a48; --las-primary-subtle: #e4eff2; /* sfondi selezione / righe attive */ --las-primary-border: #a9c9d3; --las-primary-text: #0f4757; /* testo su sfondo chiaro, contrasto AA */ /* ---- Semantici di stato documento ---- */ --las-state-bozza: #5b6670; --las-state-bozza-subtle: #eef0f2; --las-state-confermato: #1d6fa5; --las-state-confermato-subtle:#e3f0f9; --las-state-pagato: #1e7b45; /* pagato / evaso / incassato */ --las-state-pagato-subtle: #e2f3e9; --las-state-scaduto: #b42318; /* scaduto / ritardo / errore */ --las-state-scaduto-subtle: #fbe9e7; --las-state-trasformato: #6941c6; --las-state-trasformato-subtle:#efeafa; --las-state-attenzione: #96650b; /* sottoscorta, in scadenza */ --las-state-attenzione-subtle:#fdf1da; /* ---- Neutri ---- */ --las-gray-50: #f7f8f9; --las-gray-100: #eef0f2; --las-gray-200: #dfe3e6; --las-gray-300: #c9cfd4; --las-gray-400: #9aa4ad; --las-gray-500: #6e7a85; --las-gray-600: #566068; --las-gray-700: #3e4750; --las-gray-800: #2a323a; --las-gray-900: #171e24; /* ---- Sfondi e superfici ---- */ --las-bg-body: #f2f4f6; --las-bg-surface: #ffffff; --las-bg-sunken: var(--las-gray-50); --las-border: var(--las-gray-200); --las-border-strong: var(--las-gray-300); --las-text: var(--las-gray-900); --las-text-muted: var(--las-gray-500); /* ---- Sidebar (scura anche nel tema chiaro) ---- */ --las-sidebar-bg: #16263c; --las-sidebar-bg-hover: #20324c; --las-sidebar-bg-active: var(--las-primary); --las-sidebar-text: #ccd7e4; --las-sidebar-text-active:#ffffff; --las-sidebar-heading: #7e90a9; --las-sidebar-border: #24374f; --las-sidebar-w: 236px; --las-sidebar-w-min: 56px; --las-topbar-h: 52px; /* ---- Tipografia ---- */ --las-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, Arial, sans-serif; --las-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --las-fs-xs: 0.75rem; /* 12px — meta, badge */ --las-fs-sm: 0.8125rem; /* 13px — tabelle dense */ --las-fs-base: 0.875rem; /* 14px — corpo, form */ --las-fs-md: 0.9375rem; /* 15px */ --las-fs-lg: 1.0625rem; /* 17px — titoli sezione */ --las-fs-xl: 1.25rem; /* 20px — titolo pagina */ --las-fs-2xl: 1.625rem; /* 26px — valore KPI */ --las-lh-tight: 1.25; --las-lh-base: 1.45; --las-fw-normal: 400; --las-fw-medium: 500; --las-fw-semibold: 600; --las-fw-bold: 700; /* ---- Spaziature ---- */ --las-sp-1: 0.25rem; /* 4px */ --las-sp-2: 0.5rem; /* 8px */ --las-sp-3: 0.75rem; /* 12px */ --las-sp-4: 1rem; /* 16px */ --las-sp-5: 1.25rem; /* 20px */ --las-sp-6: 1.5rem; /* 24px */ --las-sp-8: 2rem; /* 32px */ /* ---- Raggi ---- */ --las-radius-sm: 4px; --las-radius-md: 6px; --las-radius-lg: 10px; /* ---- Ombre ---- */ --las-shadow-sm: 0 1px 2px rgba(15, 30, 40, 0.06); --las-shadow-md: 0 2px 8px rgba(15, 30, 40, 0.10); --las-shadow-lg: 0 8px 28px rgba(15, 30, 40, 0.18); /* ---- Focus (accessibilità) ---- */ --las-focus-ring: 0 0 0 3px rgba(20, 88, 108, 0.30); /* ---- Densità tabelle ---- */ --las-row-py: 0.375rem; /* 6px verticale per riga densa */ --las-row-px: 0.625rem; /* 10px orizzontale */ } /* ============================================================ Tema scuro opzionale — attivare con ============================================================ */ [data-bs-theme="dark"] { --las-primary: #3d93ab; --las-primary-hover: #55a6bc; --las-primary-active: #2c7f96; --las-primary-subtle: #12333d; --las-primary-border: #23566a; --las-primary-text: #7fc2d4; --las-state-bozza: #98a4ae; --las-state-bozza-subtle: #262e35; --las-state-confermato: #5ba3d6; --las-state-confermato-subtle:#12293a; --las-state-pagato: #4cbd7c; --las-state-pagato-subtle: #10301e; --las-state-scaduto: #e2695e; --las-state-scaduto-subtle: #3a1712; --las-state-trasformato: #a688e8; --las-state-trasformato-subtle:#241640; --las-state-attenzione: #d6a53c; --las-state-attenzione-subtle:#332608; --las-gray-50: #1a2127; --las-gray-100: #222a31; --las-gray-200: #2d3740; --las-gray-300: #3b4650; --las-gray-400: #5d6a75; --las-gray-500: #8b97a2; --las-gray-600: #a7b2bc; --las-gray-700: #c4cdd5; --las-gray-800: #dde3e8; --las-gray-900: #eef2f5; --las-bg-body: #10161b; --las-bg-surface: #171f26; --las-bg-sunken: #131a20; --las-border: var(--las-gray-200); --las-border-strong: var(--las-gray-300); --las-text: var(--las-gray-900); --las-text-muted: var(--las-gray-500); --las-sidebar-bg: #0d1523; --las-sidebar-bg-hover: #182539; --las-sidebar-bg-active: #14586c; --las-sidebar-text: #b3c1d4; --las-sidebar-text-active:#ffffff; --las-sidebar-heading: #66788f; --las-sidebar-border: #1d2c42; --las-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --las-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --las-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6); --las-focus-ring: 0 0 0 3px rgba(61, 147, 171, 0.4); }