/* * tokens.css — Design system di paithon.it * Tutto il sistema visivo vive qui come custom properties. * NESSUN colore hard-coded altrove: sempre var(--pt-*). */ :root { /* Schema colore nativo (scrollbar, spinner, form control) + accent dei controlli form allineato al brand. Il valore segue light/dark sotto. */ color-scheme: light; accent-color: var(--pt-accent); /* ---------- Colori — palette editoriale italiana ---------- */ /* Backgrounds */ --pt-bg: #F4F1E8; /* osso editoriale, leggermente piu profondo */ --pt-bg-elev: #FBF9F2; /* card, modal — non bianco puro */ --pt-bg-deep: #0E0C0A; /* footer, hero scuri, ricco "inchiostro" */ /* * Tinte cream per spezzare il ritmo visivo tra sezioni homepage * senza saltare sul bianco. Tint-soft appena percepibile, tint piu * marcato. Tutto warm — niente bianco puro per non bucare la pagina. */ --pt-bg-tint-soft: #EFEBDF; --pt-bg-tint: #E8E3D2; --pt-bg-elev-warm: #F7F3E8; /* Foreground */ --pt-fg: #1A1714; /* warm black con un tocco caldo */ --pt-fg-muted: #5A524A; /* secondario warm */ --pt-fg-subtle: #6A645B; /* terziario — AA su bg/elev/tint (5.2/5.6/4.6) */ /* Accent — palette italiana editoriale */ /* * Terracotta UI (link, testo, bottoni): #A44B28 — variante AA della * terracotta brand #B5532C (5.1:1 su bg contro 4.4:1). #B5532C resta il * terracotta delle ILLUSTRAZIONI (palette fissa, hardcoded negli SVG). */ --pt-accent: #A44B28; /* terracotta italiana (primary, AA) */ --pt-accent-hover: #9A4222; /* * Secondary: verde petrolio. Usato in posizioni MOLTO mirate * (eyebrow, marker decorativi, pill meta). MAI in headline lunghe * o testi: la collisione con terracotta nei titoli e' stata * la causa principale del clash visivo nel single article — ora * i titoli sono fg neutro, terracotta resta l'unico accent caldo * dominante. */ --pt-accent-2: #1F5E58; /* verde petrolio (secondary) */ --pt-accent-2-hover: #154843; --pt-accent-2-soft: #C7DAD7; /* tinta chiara per background lievi */ --pt-accent-3: #C9A961; /* ocra/oro spento (tertiary) */ /* "Bianco caldo" del tricolore nel logo: giallo molto schiarito verso il bianco della bandiera. Fa da luce centrale tra verde e rosso. */ --pt-flag-white: #EFE3AC; /* * Superfici "tint": accent a bassa opacita per background di hover, * badge e stati attivi. color-mix cosi seguono l'accent light/dark * senza duplicare valori. Promuovono a token i mix ripetuti nei * componenti (pill, filtri, callout). */ --pt-tint-accent: color-mix(in srgb, var(--pt-accent) 14%, transparent); --pt-tint-accent-2: color-mix(in srgb, var(--pt-accent-2) 14%, transparent); --pt-tint-accent-3: color-mix(in srgb, var(--pt-accent-3) 20%, transparent); /* * Focus ring unico, token-driven: un solo anello coerente su tutti gli * elementi interattivi (:focus-visible in reset.css). Contrasto >= 3:1. */ --pt-ring: var(--pt-accent); --pt-ring-offset: 2px; /* * Palette illustrazioni (fissa, 5 colori) — usata negli SVG editoriali * e nei blocchi "stampati" (es. home-esplora, le tre facce del tribar). * FISSA nei due temi: NON ridefinita in dark. */ --pt-illus-terracotta: #B5532C; --pt-illus-teal: #2D5A5C; --pt-illus-ocra: #C9A961; --pt-illus-cream: #F8F5EE; --pt-illus-ink: #1A1A1A; /* Sistema (errori, success, warning) */ --pt-success: #2D6A4F; --pt-warning: #C9A961; --pt-error: var(--pt-accent); /* terracotta = errore; segue light/dark */ /* Borders e dividers */ --pt-border: #E2DCC9; --pt-border-strong: #C5BEAA; /* * Aurora drift — coppie di colori RGB usate dal background animato * (vedi animations.css). Variabili separate cosi possono divergere * tra light/dark senza riscrivere i keyframes. */ --pt-aurora-1: 181, 83, 44; /* terracotta */ --pt-aurora-2: 31, 94, 88; /* petrolio */ --pt-aurora-3: 201, 169, 97; /* ocra */ --pt-aurora-alpha: 0.10; /* opacity blob in light */ /* ---------- Tipografia ---------- */ --pt-font-display: "Fraunces", Georgia, "Times New Roman", serif; --pt-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Scala 1.250 (major third) — base 1rem */ --pt-text-xs: 0.64rem; /* 10.24 */ --pt-text-sm: 0.8rem; /* 12.8 */ --pt-text-base: 1rem; /* 16 */ --pt-text-md: 1.25rem; /* 20 */ --pt-text-lg: 1.563rem; /* 25 */ --pt-text-xl: 1.953rem; /* 31.25 */ --pt-text-2xl: 2.441rem; /* 39.06 */ --pt-text-3xl: 3.052rem; /* 48.83 */ --pt-text-4xl: 3.815rem; /* 61.04 */ /* * Display fluidi (clamp): le headline scalano con continuita' tra * mobile e desktop, senza salto a un unico breakpoint. Il max eguaglia * i valori desktop attuali (nessuna regressione a schermo largo); il * min e' piu misurato su mobile (h1 61->44px: piu respiro su 375px). */ --pt-display-xl: clamp(2.75rem, 2rem + 3.4vw, 3.815rem); /* h1 44 -> 61 */ --pt-display-lg: clamp(2.25rem, 1.75rem + 2.4vw, 3.052rem); /* h2 36 -> 48.8 */ --pt-display-md: clamp(1.85rem, 1.55rem + 1.5vw, 2.441rem); /* h3 29.6 -> 39 */ --pt-display-sm: clamp(1.4rem, 1.2rem + 0.9vw, 1.953rem); /* h4/sub 22 -> 31 */ /* Body size fluido (clamp tra 16 e 18px) */ --pt-text-body-fluid: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* Line-height */ --pt-leading-tight: 1.1; /* display */ --pt-leading-snug: 1.3; --pt-leading-normal: 1.5; --pt-leading-body: 1.65; /* body long-form */ /* Tracking */ --pt-tracking-tight: -0.02em; --pt-tracking-normal: 0; --pt-tracking-wide: 0.04em; --pt-tracking-caps: 0.08em; /* Pesi */ --pt-weight-regular: 400; --pt-weight-medium: 500; --pt-weight-semibold: 600; --pt-weight-bold: 800; /* ---------- Spacing — scala multipli di 4 ---------- */ --pt-space-1: 4px; --pt-space-2: 8px; --pt-space-3: 12px; --pt-space-4: 16px; --pt-space-5: 24px; --pt-space-6: 32px; --pt-space-7: 48px; --pt-space-8: 64px; --pt-space-9: 96px; --pt-space-10: 128px; --pt-space-11: 160px; /* * Spaziatura di sezione fluida: il ritmo verticale tra le grandi * sezioni "respira" su desktop e si compatta su mobile. Da usare per * il padding-block delle section full-width (home, landing area). */ --pt-space-section: clamp(3rem, 2rem + 5vw, 6rem); /* 48 -> 96 */ --pt-space-section-lg: clamp(4rem, 2.5rem + 7.5vw, 8rem); /* 64 -> 128 */ /* ---------- Layout ---------- */ --pt-container: 1280px; /* container massimo */ --pt-grid-gap: 24px; /* * Misura di riga. In `ch`, non in px: il corpo del testo scala con la * viewport, quindi una colonna larga 680px vale 26 caratteri su un telefono * e 75 su un tablet. Il numero in px non descrive niente, ed e' misurato * con un browser vero a dodici larghezze. * * Si dichiara UNA volta sul contenitore del contenuto, non su `p`: se la * mettono i paragrafi, codice, figure e tabelle riempiono il container e * nella stessa pagina si vedono tre bordi sinistri diversi. */ --pt-measure: 68ch; --pt-measure-wide: 74ch; /* da ~1200px, dove la riga puo' allungarsi */ /* * Qui c'era `--pt-reading: 680px`, e il tema del sito lo usava in quaranta * punti. Migrato: 68ch misurati con un browser fanno 680,73px sul corpo * desktop, cioe' la stessa colonna, e a 768px stringono a 647 invece di * tenere una riga da settantun caratteri. Il numero in px non descriveva * la cosa che si vuole tenere ferma, che e' quanti caratteri stanno su una * riga. */ /* ---------- Border radius ---------- */ --pt-radius-none: 0; --pt-radius-sm: 2px; --pt-radius-md: 4px; --pt-radius-lg: 8px; --pt-radius-full: 9999px; /* ---------- Shadow soft (warm-tinted, non grigie) ---------- */ --pt-shadow-xs: 0 1px 1px rgba(26, 26, 26, 0.03); --pt-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 1px rgba(26, 26, 26, 0.03); --pt-shadow-md: 0 4px 8px rgba(26, 26, 26, 0.05), 0 2px 4px rgba(26, 26, 26, 0.04); --pt-shadow-lg: 0 12px 24px rgba(26, 26, 26, 0.07), 0 6px 10px rgba(26, 26, 26, 0.04); /* ---------- Transition ---------- */ /* Easing custom (decelerazione morbida, senza overshoot): la stessa curva gia usata da card/view-transition, promossa a token. */ --pt-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --pt-transition-fast: 120ms var(--pt-ease-out); --pt-transition-base: 200ms var(--pt-ease-out); --pt-transition-slow: 400ms var(--pt-ease-out); /* ---------- Z-index ---------- */ --pt-z-base: 1; --pt-z-sticky: 10; --pt-z-header: 50; --pt-z-overlay: 100; --pt-z-modal: 200; } /* ---------- Dark mode ---------- */ /* * Dark mode 2026: "inchiostro tipografico" — nero ricco appena * warm, foreground osso luminoso (contrast 15:1+ su bg). Niente * marroni bruciati, niente cream spenti. Si legge come una pagina * stampata su carta nera satinata. */ [data-theme="dark"] { color-scheme: dark; --pt-bg: #0E0C0A; /* nero quasi puro con retrogusto warm */ --pt-bg-elev: #16130F; /* card */ --pt-bg-deep: #050403; /* footer, sezioni "deep" */ --pt-bg-tint-soft: #110F0C; --pt-bg-tint: #15120E; --pt-bg-elev-warm: #1A1611; --pt-fg: #F4ECDD; /* osso luminoso — contrast 15.8:1 su bg */ --pt-fg-muted: #BCB3A1; /* contrast 9.3:1 */ --pt-fg-subtle: #8E8676; /* contrast 5.0:1 — AA per UI metadata */ /* * Terracotta dark: piu caldo e leggermente piu luminoso del light * per restare leggibile su nero, ma non neon. Contrast 5.4:1 su * #0E0C0A per testo, abbondante per CTA. */ --pt-accent: #E27B52; --pt-accent-hover: #F39875; /* * Verde petrolio dark: ribilanciato a #5BA39C — contrast 6.1:1 * su bg, sufficiente per pillole/eyebrow e marker decorativi. * Non usato in headline lunghe. */ --pt-accent-2: #5BA39C; --pt-accent-2-hover: #76B8B1; --pt-accent-2-soft: #18302E; --pt-accent-3: #DDB874; --pt-flag-white: #FCF9F2; --pt-border: #221F1A; --pt-border-strong: #34302A; --pt-aurora-alpha: 0.18; /* blob piu visibili su nero */ /* Shadow piu profonde su sfondi scuri */ --pt-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4); --pt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --pt-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --pt-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6); } /* Rispetto della preferenza di sistema se l'utente non ha scelto esplicitamente */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --pt-bg: #0E0C0A; --pt-bg-elev: #16130F; --pt-bg-deep: #050403; --pt-bg-tint-soft: #110F0C; --pt-bg-tint: #15120E; --pt-bg-elev-warm: #1A1611; --pt-fg: #F4ECDD; --pt-fg-muted: #BCB3A1; --pt-fg-subtle: #8E8676; --pt-accent: #E27B52; --pt-accent-hover: #F39875; --pt-accent-2: #5BA39C; --pt-accent-2-hover: #76B8B1; --pt-accent-2-soft: #18302E; --pt-accent-3: #DDB874; --pt-flag-white: #FCF9F2; --pt-border: #221F1A; --pt-border-strong: #34302A; --pt-aurora-alpha: 0.18; } } /* Riduzione movimento per chi lo preferisce */ @media (prefers-reduced-motion: reduce) { :root { --pt-transition-fast: 0ms; --pt-transition-base: 0ms; --pt-transition-slow: 0ms; } }