/** * DESIGN TOKENS · il visual theme del servizio. * * Questo è l'unico file che definisce come appare il servizio. Non contiene * selettori di componente, solo variabili: chi vorrà rifare la grafica da zero * lavorerà qui, senza toccare database, logica pratica, pagamenti, documenti, * firma, stati, backend o email (sez. 21, requisito architetturale). * * DIREZIONE (sez. 22-23): ufficio digitale privato contemporaneo. * Ordine, autorevolezza, gerarchia nettissima. Non un ecommerce, non una * startup giocosa, non un vecchio portale pubblico, non un tema WordPress. * Il valore visivo nasce dai dati: numeri pratica, date, codici, enti. */ :root { /* ---------------------------------------------------------------- */ /* Colore */ /* Palette volutamente stretta: due neutri, un accento, due segnali. */ /* L'autorevolezza viene dalla disciplina, non dalla quantità. */ /* ---------------------------------------------------------------- */ --pc-color-ink: #15181e; /* testo principale, quasi nero freddo */ --pc-color-ink-muted: #5b626e; /* micro-label, note, metadati */ --pc-color-ink-faint: #8a919c; /* testo terziario */ --pc-color-paper: #ffffff; /* superfici */ --pc-color-paper-alt: #f5f6f8; /* superfici secondarie */ --pc-color-paper-deep: #eceef1; /* fondali */ --pc-color-rule: #dcdfe4; /* separatori sottili */ --pc-color-rule-strong: #b9bec7; /* Accento: blu d'inchiostro istituzionale, non brillante. Deve leggere come una penna d'ufficio, non come un bottone "compra". */ --pc-color-accent: #1d3f6e; --pc-color-accent-hover: #16314f; --pc-color-accent-ink: #ffffff; --pc-color-accent-soft: #e8edf4; /* Segnali: usati con parsimonia, mai decorativi. */ --pc-color-confirm: #1d6b48; --pc-color-danger: #96242a; --pc-color-notice: #8a6512; /* ---------------------------------------------------------------- */ /* Tipografia */ /* Stack di sistema: nessun webfont da scaricare, resa immediata su */ /* mobile anche a rete lenta (sez. 19, prestazioni). */ /* Per adottare un font proprietario basta cambiare queste tre righe. */ /* ---------------------------------------------------------------- */ --pc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pc-font-display: var(--pc-font-body); --pc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --pc-weight-normal: 400; --pc-weight-medium: 500; --pc-weight-bold: 600; /* Scala tipografica fluida: una sola definizione per ogni livello, nessuna media query sparsa nei componenti. */ --pc-text-micro: .6875rem; /* micro-label amministrative */ --pc-text-small: .8125rem; --pc-text-base: 1rem; --pc-text-lead: 1.125rem; --pc-text-h3: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); --pc-text-h2: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); --pc-text-h1: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem); --pc-text-hero: clamp(2rem, 1.5rem + 2.6vw, 3.25rem); --pc-leading-tight: 1.15; --pc-leading-snug: 1.35; --pc-leading-normal: 1.6; /* Il tracking largo sulle micro-label è ciò che dà il carattere "documento amministrativo" senza aggiungere un solo grammo. */ --pc-tracking-label: .12em; --pc-tracking-code: .08em; --pc-tracking-tight: -.01em; /* ---------------------------------------------------------------- */ /* Spazio · scala unica, usata ovunque */ /* ---------------------------------------------------------------- */ --pc-space-1: .25rem; --pc-space-2: .5rem; --pc-space-3: .75rem; --pc-space-4: 1rem; --pc-space-5: 1.5rem; --pc-space-6: 2rem; --pc-space-7: 3rem; --pc-space-8: 4.5rem; --pc-space-9: 6rem; /* ---------------------------------------------------------------- */ /* Forma */ /* Raggi minimi: l'arrotondamento morbido legge come consumer. */ /* ---------------------------------------------------------------- */ --pc-radius: 3px; --pc-radius-lg: 6px; --pc-border-width: 1px; --pc-border-strong: 2px; /* Ombre quasi assenti: l'ordine si costruisce con le linee, non con la profondità finta. */ --pc-shadow-none: none; --pc-shadow-raised: 0 1px 2px rgb(21 24 30 / .06), 0 8px 24px -12px rgb(21 24 30 / .12); /* ---------------------------------------------------------------- */ /* Misura e layout */ /* ---------------------------------------------------------------- */ --pc-measure: 34rem; /* colonna del percorso e dei documenti */ --pc-measure-text: 42rem; /* colonna di lettura */ --pc-measure-wide: 68rem; /* contenitore principale */ --pc-gutter: var(--pc-space-4); /* ---------------------------------------------------------------- */ /* Movimento · solo funzionale (sez. 22.7) */ /* ---------------------------------------------------------------- */ --pc-motion: 160ms cubic-bezier(.2, 0, .2, 1); --pc-motion-slow: 280ms cubic-bezier(.2, 0, .2, 1); } /** * Tema scuro. * * Attivo se il sistema lo richiede, salvo scelta esplicita dell'utente. * Cambiano solo i token: nessun componente va riscritto. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { --pc-color-ink: #e9ebef; --pc-color-ink-muted: #a2a9b5; --pc-color-ink-faint: #7b828e; --pc-color-paper: #14161a; --pc-color-paper-alt: #1b1e24; --pc-color-paper-deep: #0f1115; --pc-color-rule: #2c3038; --pc-color-rule-strong: #3d434d; --pc-color-accent: #8fb3e0; --pc-color-accent-hover: #a9c5e9; --pc-color-accent-ink: #10151d; --pc-color-accent-soft: #1c2532; --pc-color-confirm: #6cc39a; --pc-color-danger: #e08b8f; --pc-color-notice: #d9b45f; --pc-shadow-raised: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6); } } :root[data-tema="scuro"] { --pc-color-ink: #e9ebef; --pc-color-ink-muted: #a2a9b5; --pc-color-ink-faint: #7b828e; --pc-color-paper: #14161a; --pc-color-paper-alt: #1b1e24; --pc-color-paper-deep: #0f1115; --pc-color-rule: #2c3038; --pc-color-rule-strong: #3d434d; --pc-color-accent: #8fb3e0; --pc-color-accent-hover: #a9c5e9; --pc-color-accent-ink: #10151d; --pc-color-accent-soft: #1c2532; --pc-color-confirm: #6cc39a; --pc-color-danger: #e08b8f; --pc-color-notice: #d9b45f; } /** * Contrasto elevato: si irrobustiscono le linee, che sono l'ossatura del * sistema visivo. */ @media (prefers-contrast: more) { :root { --pc-color-rule: var(--pc-color-ink-muted); --pc-border-width: 1.5px; } }