/* ============================================================ Piattaforma Verifiche — tokens.css Direzione "Indaco quieto". Solo custom properties. Tema chiaro di default; il tema scuro è una ridefinizione di variabili in fondo al file (nessun colore hard-coded nei componenti). ============================================================ */ :root { /* --- Colori: neutri --- */ --pv-bg: #F4F5F7; /* sfondo pagina */ --pv-surface: #FFFFFF; /* card, pannelli, barre */ --pv-surface-2: #EDEEF1; /* superfici secondarie, righe zebrate */ --pv-border: #E2E4E9; --pv-border-strong: #C9CCD6; --pv-ink: #24262C; /* testo primario */ --pv-ink-2: #5B6068; /* testo secondario */ --pv-ink-3: #82868F; /* testo disattivato/meta */ /* --- Colori: primario (indaco desaturato) --- */ --pv-primary: #47549B; --pv-primary-hover: #3C4886; --pv-primary-active: #333D75; --pv-primary-tint: #EBEDF7; /* sfondi tenui, nav attiva */ --pv-primary-tint-hover: #DFE2F1; --pv-on-primary: #FFFFFF; /* --- Colori semantici (testo AA su tinta chiara) --- */ --pv-success: #2F6B45; --pv-success-tint: #E6F0E8; --pv-success-border: #C2DCCA; --pv-warning: #8A6116; --pv-warning-tint: #F7F0DD; --pv-warning-border: #E8D9AC; --pv-danger: #A6504B; --pv-danger-hover: #8F413D; --pv-danger-tint: #F8ECEA; --pv-danger-border: #EBCBC7; --pv-info: #39648F; --pv-info-tint: #E8F1F9; --pv-info-border: #C6DBEC; /* --- Area editor (convivenza con Monaco scuro) --- */ --pv-editor-frame: #26282F; /* cornice intermedia attorno all'editor */ --pv-editor-bg: #1B1D22; /* stesso registro del tema Monaco */ --pv-editor-panel: #212329; /* pannello output/test */ --pv-editor-border: #33363F; --pv-editor-ink: #D3D5DA; --pv-editor-ink-2: #888D99; --pv-editor-success: #A2BFAA; --pv-editor-danger: #D9A29A; /* --- Tipografia --- */ --pv-font-ui: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pv-font-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, "Liberation Mono", monospace; --pv-text-xs: 0.75rem; /* 12 — solo meta/etichette maiuscole */ --pv-text-sm: 0.8125rem; /* 13 */ --pv-text-base: 0.9375rem;/* 15 — corpo */ --pv-text-md: 1.0625rem; /* 17 */ --pv-text-lg: 1.25rem; /* 20 */ --pv-text-xl: 1.5rem; /* 24 */ --pv-text-2xl: 1.75rem; /* 28 */ --pv-leading: 1.55; --pv-leading-tight: 1.3; --pv-weight-regular: 400; --pv-weight-medium: 600; --pv-weight-bold: 700; /* --- Spaziatura --- */ --pv-space-1: 4px; --pv-space-2: 8px; --pv-space-3: 12px; --pv-space-4: 16px; --pv-space-5: 20px; --pv-space-6: 24px; --pv-space-7: 32px; --pv-space-8: 40px; --pv-space-9: 48px; --pv-space-10: 64px; /* --- Raggi, ombre, transizioni, focus --- */ --pv-radius-sm: 6px; --pv-radius-md: 8px; --pv-radius-lg: 12px; --pv-radius-full: 999px; --pv-shadow-1: 0 1px 3px rgba(36, 38, 44, 0.06); --pv-shadow-2: 0 4px 16px rgba(36, 38, 44, 0.10); --pv-transition: 150ms ease; --pv-focus-ring: 0 0 0 3px rgba(71, 84, 155, 0.35); --pv-hit-min: 40px; /* target minimo interattivo */ } /* ============================================================ Tema scuro — PREDISPOSIZIONE (non rifinito). Attivare con . Solo ridefinizioni. ============================================================ */ [data-theme="dark"] { --pv-bg: #17181C; --pv-surface: #1F2127; --pv-surface-2: #26282F; --pv-border: #33363F; --pv-border-strong: #4A4E5A; --pv-ink: #E6E7EA; --pv-ink-2: #A7ABB4; --pv-ink-3: #7C808A; --pv-primary: #8B96D6; --pv-primary-hover: #9DA7DE; --pv-primary-active: #7A85C9; --pv-primary-tint: #2A2E45; --pv-primary-tint-hover: #333856; --pv-on-primary: #17181C; --pv-success: #9CC7A9; --pv-success-tint: #22302A; --pv-success-border: #35513F; --pv-warning: #D6B36A; --pv-warning-tint: #322B1C; --pv-warning-border: #55482A; --pv-danger: #D89A94; --pv-danger-hover: #E2ACA7; --pv-danger-tint: #33231F; --pv-danger-border: #573B37; --pv-info: #8FB4D9; --pv-info-tint: #1F2A36; --pv-info-border: #35485C; --pv-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4); --pv-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5); --pv-focus-ring: 0 0 0 3px rgba(139, 150, 214, 0.45); /* L'area editor resta invariata: è già scura. */ }