/* ============================================================================ tokens.css — i valori del progetto, e nient'altro ============================================================================ È L'UNICO POSTO IN CUI ESISTE UN COLORE, UNA SPAZIATURA O UNA DIMENSIONE. Caricato per primo da base/_head.html: ogni altro foglio legge da qui. Un valore scritto direttamente dentro una regola — `#2196f3` invece di `var(--vaitony-primary-500)` — non è un errore che si vede: la pagina funziona, e il colore resta quello finché qualcuno non cambia il tema e si accorge che tre pagine su quindici non sono cambiate. Verifica: grep -rn "#[0-9a-fA-F]\{6\}" static/css --include=*.css | grep -v tokens.css ---------------------------------------------------------------------------- I PUNTI DI ROTTURA — sono questi quattro e nessun altro (PROMPT 27) ---------------------------------------------------------------------------- 576px telefono in orizzontale 768px tablet in verticale 992px tablet in orizzontale, portatili piccoli 1200px schermi grandi Sono i quattro di Bootstrap 5, che il progetto già usa: inventarne altri significa avere due griglie che si rompono in punti diversi sulla stessa pagina. OGNI @media USA `min-width`, MAI `max-width`. È la differenza fra scrivere mobile-first e dire di farlo: con `min-width` la regola stretta è quella di base e le altre AGGIUNGONO; con `max-width` la regola base è quella larga e le altre CORREGGONO — che è come si arriva a venticinque `@media` sparse su quindici file con sei punti di rottura diversi, cioè da dove veniva questo progetto. Le variabili qui sotto NON si possono usare dentro una `@media`: la sintassi delle media query non legge le variabili CSS. Servono a chi genera CSS e a chi legge, come dichiarazione dei valori validi. ============================================================================ */ :root { --vaitony-bp-sm: 576px; --vaitony-bp-md: 768px; --vaitony-bp-lg: 992px; --vaitony-bp-xl: 1200px; } :root { /* Primary Colors - Blue gradient */ --vaitony-primary-50: #e3f2fd; --vaitony-primary-100: #bbdefb; --vaitony-primary-200: #90caf9; --vaitony-primary-300: #64b5f6; --vaitony-primary-400: #42a5f5; --vaitony-primary-500: #2196f3; --vaitony-primary-600: #1e88e5; --vaitony-primary-700: #1976d2; --vaitony-primary-800: #1565c0; --vaitony-primary-900: #0d47a1; /* Secondary Colors - Purple gradient */ --vaitony-secondary-50: #f3e5f5; --vaitony-secondary-100: #e1bee7; --vaitony-secondary-200: #ce93d8; --vaitony-secondary-300: #ba68c8; --vaitony-secondary-400: #ab47bc; --vaitony-secondary-500: #9c27b0; --vaitony-secondary-600: #8e24aa; --vaitony-secondary-700: #7b1fa2; --vaitony-secondary-800: #6a1b9a; --vaitony-secondary-900: #4a148c; /* Success Colors - Green */ --vaitony-success-50: #e8f5e9; --vaitony-success-500: #4caf50; --vaitony-success-700: #388e3c; /* Warning Colors - Orange */ --vaitony-warning-50: #fff3e0; --vaitony-warning-500: #ff9800; --vaitony-warning-700: #f57c00; /* Error Colors - Red */ --vaitony-error-50: #ffebee; --vaitony-error-500: #f44336; --vaitony-error-700: #d32f2f; /* Info Colors - Cyan */ --vaitony-info-50: #e0f7fa; --vaitony-info-500: #00bcd4; --vaitony-info-700: #0097a7; /* Neutral/Gray Scale */ --vaitony-gray-50: #fafafa; --vaitony-gray-100: #f5f5f5; --vaitony-gray-200: #eeeeee; --vaitony-gray-300: #e0e0e0; --vaitony-gray-400: #bdbdbd; --vaitony-gray-500: #9e9e9e; --vaitony-gray-600: #757575; --vaitony-gray-700: #616161; --vaitony-gray-800: #424242; --vaitony-gray-900: #212121; /* Semantic Colors */ --vaitony-text-primary: #1a1a1a; --vaitony-text-secondary: #666666; --vaitony-text-disabled: #9e9e9e; --vaitony-text-hint: #bdbdbd; --vaitony-bg-primary: #ffffff; --vaitony-bg-secondary: #f8f9fa; --vaitony-bg-tertiary: #f0f2f5; --vaitony-border-light: #e9ecef; --vaitony-border-medium: #dee2e6; --vaitony-border-dark: #ced4da; /* Gradients */ --vaitony-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --vaitony-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); --vaitony-gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --vaitony-gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --vaitony-gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --vaitony-gradient-blue: linear-gradient(135deg, #2196f3 0%, #1976d2 100%); --vaitony-gradient-teal: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); --vaitony-gradient-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%); /* La sfumatura delle testate del cruscotto e dell'elenco dei progetti (2026-09-26): tre colori, perche' scorre lentamente (base.css, vaitony-scorri-sfumatura) e con due soli il movimento non si vedrebbe. */ --vaitony-gradient-aurora: linear-gradient(120deg, #667eea 0%, #764ba2 40%, #2196f3 75%, #00bcd4 100%); /* Il testo e il «vetro» sopra una sfumatura: bianco pieno, e bianco trasparente per le pillole e i pulsanti che ci stanno sopra. */ --vaitony-testo-su-colore: #ffffff; --vaitony-vetro: rgba(255, 255, 255, 0.16); --vaitony-vetro-forte: rgba(255, 255, 255, 0.28); --vaitony-vetro-bordo: rgba(255, 255, 255, 0.35); --vaitony-testo-su-colore-tenue: rgba(255, 255, 255, 0.85); /* ===== SPACING SYSTEM ===== */ --vaitony-space-1: 0.25rem; /* 4px */ --vaitony-space-2: 0.5rem; /* 8px */ --vaitony-space-3: 0.75rem; /* 12px */ --vaitony-space-4: 1rem; /* 16px */ --vaitony-space-5: 1.25rem; /* 20px */ --vaitony-space-6: 1.5rem; /* 24px */ --vaitony-space-8: 2rem; /* 32px */ --vaitony-space-10: 2.5rem; /* 40px */ --vaitony-space-12: 3rem; /* 48px */ --vaitony-space-16: 4rem; /* 64px */ /* L'area di tocco minima sul telefono (PROMPT 31): sotto questa misura il polpastrello sbaglia bersaglio. La usano i pulsanti piccoli e le etichette delle caselle. */ --vaitony-area-di-tocco: 44px; /* L'altezza dei grafici (ApexCharts li disegna al 100% del loro contenitore): quello principale, e quello compatto delle colonne strette. */ --vaitony-altezza-grafico: 18rem; --vaitony-altezza-grafico-compatto: 16rem; /* ===== TYPOGRAPHY ===== */ --vaitony-font-family-base: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --vaitony-font-family-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; --vaitony-font-size-xs: 0.75rem; /* 12px */ --vaitony-font-size-sm: 0.875rem; /* 14px */ --vaitony-font-size-base: 1rem; /* 16px */ --vaitony-font-size-lg: 1.125rem; /* 18px */ --vaitony-font-size-xl: 1.25rem; /* 20px */ --vaitony-font-size-2xl: 1.5rem; /* 24px */ --vaitony-font-size-3xl: 1.875rem; /* 30px */ --vaitony-font-size-4xl: 2.25rem; /* 36px */ --vaitony-font-size-5xl: 3rem; /* 48px */ --vaitony-font-weight-light: 300; --vaitony-font-weight-normal: 400; --vaitony-font-weight-medium: 500; --vaitony-font-weight-semibold: 600; --vaitony-font-weight-bold: 700; --vaitony-line-height-tight: 1.25; --vaitony-line-height-base: 1.5; --vaitony-line-height-relaxed: 1.75; /* Le parole in maiuscolo piccolo (il soprattitolo di una testata) vogliono aria. */ --vaitony-spaziatura-maiuscolo: 0.08em; /* ===== BORDER RADIUS ===== */ --vaitony-radius-sm: 0.25rem; /* 4px */ --vaitony-radius-base: 0.5rem; /* 8px */ --vaitony-radius-lg: 0.75rem; /* 12px */ --vaitony-radius-xl: 1rem; /* 16px */ --vaitony-radius-2xl: 1.5rem; /* 24px */ --vaitony-radius-full: 9999px; /* Circular */ /* ===== SHADOWS & ELEVATIONS ===== */ --vaitony-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --vaitony-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.08); --vaitony-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --vaitony-shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.12), 0 3px 7px -3px rgba(0, 0, 0, 0.1); --vaitony-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --vaitony-shadow-xl: 0 20px 40px -4px rgba(0, 0, 0, 0.2), 0 8px 16px -4px rgba(0, 0, 0, 0.08); --vaitony-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Colored Shadows */ --vaitony-shadow-primary: 0 8px 20px rgba(33, 150, 243, 0.25); --vaitony-shadow-success: 0 8px 20px rgba(76, 175, 80, 0.25); --vaitony-shadow-warning: 0 8px 20px rgba(255, 152, 0, 0.25); --vaitony-shadow-error: 0 8px 20px rgba(244, 67, 54, 0.25); --vaitony-shadow-info: 0 8px 20px rgba(0, 188, 212, 0.25); --vaitony-shadow-secondary: 0 8px 20px rgba(156, 39, 176, 0.25); /* ===== Z-INDEX SCALE ===== */ --vaitony-z-dropdown: 1000; --vaitony-z-sticky: 1020; --vaitony-z-fixed: 1030; --vaitony-z-modal-backdrop: 1040; --vaitony-z-modal: 1050; --vaitony-z-popover: 1060; --vaitony-z-tooltip: 1070; /* ===== TRANSITIONS ===== */ --vaitony-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --vaitony-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --vaitony-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --vaitony-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* Easing functions */ --vaitony-ease-in: cubic-bezier(0.4, 0, 1, 1); --vaitony-ease-out: cubic-bezier(0, 0, 0.2, 1); --vaitony-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --vaitony-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Le schede che si muovono (components.css, .scheda-viva e .entrata-a-cascata): quanto si alzano al passaggio del puntatore, quanto dura la loro entrata e quanto aspetta ciascuna rispetto alla precedente. */ --vaitony-sollevamento: -6px; --vaitony-durata-entrata: 600ms; --vaitony-passo-cascata: 70ms; /* Il movimento di fondo delle testate a sfumatura: lento, perche' deve vedersi senza distrarre. */ --vaitony-durata-sfumatura: 16s; --vaitony-durata-fluttua: 12s; /* L'altezza dei mini grafici dentro i riquadri numerici (components/stat_tile.html). */ --vaitony-altezza-andamento: 3rem; /* L'anello del riuso della cache, nel cruscotto. */ --vaitony-altezza-anello: 11rem; /* La chat del progetto è alta quanto lo schermo meno questo margine: la striscia delle schede sopra di lei e lo spazio fra le due (ai-chat.css, «La scheda a tutta altezza»). Sotto l'altezza minima si rinuncia allo schermo intero e scorre la pagina: su un telefono in orizzontale, o con la tastiera aperta, i messaggi resterebbero una riga. */ --vaitony-chat-margine-schermo: 5.5rem; --vaitony-chat-altezza-minima: 26rem; /* I suggerimenti dello stato vuoto non si allargano oltre questa misura (righe corte si leggono), e il campo della domanda cresce con il testo fino a questa altezza. */ --vaitony-chat-larghezza-suggerimenti: 48rem; --vaitony-chat-campo-altezza-massima: 12rem; /* Sotto questa larghezza il nome di una sezione manda a capo i suoi comandi (components/titolo_sezione.html). */ --vaitony-titolo-sezione-base: 8rem; } /* ===== DARK MODE SUPPORT ===== */ [data-bs-theme="dark"] { --vaitony-text-primary: #e9ecef; --vaitony-text-secondary: #adb5bd; --vaitony-text-disabled: #6c757d; --vaitony-text-hint: #495057; --vaitony-bg-primary: #212529; --vaitony-bg-secondary: #343a40; --vaitony-bg-tertiary: #495057; --vaitony-border-light: #495057; --vaitony-border-medium: #6c757d; --vaitony-border-dark: #adb5bd; /* Adjust shadows for dark mode */ --vaitony-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --vaitony-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4); --vaitony-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --vaitony-shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.6), 0 3px 7px -3px rgba(0, 0, 0, 0.4); --vaitony-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.3); } /* ============================================================================ La tavolozza delle pagine di accesso ============================================================================ PERCHE' E' UNA SECONDA TAVOLOZZA, e perché è legata a una classe invece che a `:root`. Le schermate di accesso, registrazione e recupero password avevano il proprio `:root` dentro `users/styles.html`, con nomi che si sovrappongono a quelli qui sopra (`--vaitony-gray-500`, `--vaitony-shadow-md`, `--vaitony-radius-lg`) e valori diversi. Finché i due fogli non si incontravano nessuno se ne accorgeva; adesso che il documento è uno solo, lasciarli su `:root` significherebbe che aprire la pagina di accesso ridefinisce i grigi di tutto il sito. Legandoli a `.auth-page` — la classe che `layouts/auth.html` mette sul `` — valgono dentro quelle pagine e nient'altro, e l'aspetto attuale resta identico. È UNA CONVIVENZA, NON UNA SOLUZIONE: due tavolozze per lo stesso prodotto restano due tavolozze. Unificarle cambia l'aspetto delle schermate di accesso, e quella è una decisione di design, non di architettura: la prende chi disegna, non questo prompt. ============================================================================ */ .auth-page { /* Primary Brand Colors */ --vaitony-primary: #2563eb; --vaitony-primary-dark: #1d4ed8; --vaitony-primary-light: #3b82f6; --vaitony-secondary: #8b5cf6; --vaitony-accent: #06b6d4; /* Neutral Colors */ --vaitony-dark: #0f172a; --vaitony-dark-soft: #1e293b; --vaitony-gray-900: #111827; --vaitony-gray-800: #1f2937; --vaitony-gray-700: #374151; --vaitony-gray-600: #4b5563; --vaitony-gray-500: #6b7280; --vaitony-gray-400: #9ca3af; --vaitony-gray-300: #d1d5db; --vaitony-gray-200: #e5e7eb; --vaitony-gray-100: #f3f4f6; --vaitony-gray-50: #f9fafb; --vaitony-white: #ffffff; /* Status Colors */ --vaitony-success: #10b981; --vaitony-warning: #f59e0b; --vaitony-error: #ef4444; --vaitony-info: #06b6d4; /* AI Theme Colors */ --vaitony-ai-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --vaitony-neural-blue: #4f46e5; --vaitony-cyber-cyan: #06d6a0; --vaitony-electric-purple: #8b5cf6; /* Typography */ --vaitony-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --vaitony-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; /* Spacing */ --vaitony-space-xs: 0.25rem; --vaitony-space-sm: 0.5rem; --vaitony-space-md: 1rem; --vaitony-space-lg: 1.5rem; --vaitony-space-xl: 2rem; --vaitony-space-2xl: 3rem; /* Border Radius */ --vaitony-radius-sm: 0.375rem; --vaitony-radius-md: 0.5rem; --vaitony-radius-lg: 0.75rem; --vaitony-radius-xl: 1rem; --vaitony-radius-2xl: 1.5rem; /* Shadows */ --vaitony-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --vaitony-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --vaitony-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --vaitony-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --vaitony-shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3); /* Transitions */ --vaitony-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --vaitony-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Il tema scuro delle pagine di accesso: le stesse variabili, sui valori scuri. Sta qui e non in `pages/auth.css` perché tokens.css è l'unico posto in cui esiste un valore (PROMPT 30) — e perché il giorno in cui il tema scuro arriverà anche nell'area applicativa, i due blocchi dovranno guardarsi in faccia. */ @media (prefers-color-scheme: dark) { .auth-page { --vaitony-gray-50: #0f172a; --vaitony-gray-100: #1e293b; --vaitony-gray-200: #334155; --vaitony-gray-300: #475569; --vaitony-white: #1e293b; } }