/* ============================================================ Token del tema — estratti dall'ibrido A+C (mockup/AC-ibrido-archivio.html) I valori colore sono quelli passati dalla validazione WCAG della sessione 4: non cambiarli senza rifare il controllo di contrasto. ============================================================ */ :root{ /* ---- carta e inchiostro ---- */ --paper: #f6f1e8; --paper-2: #eee6d6; --ink: #241f16; --ink-2: #4a4237; --muted: #6f6558; /* ---- accento terracotta, a due livelli ---- --accent campiture e numerali grandi (sopra ci va SEMPRE testo #fff) --accent-text testo piccolo colorato: 4.5:1 su tutti i fondi chiari --accent-deep hover dei titoli */ --accent: #ac592b; --accent-text: #96481f; --accent-deep: #8a441d; --on-accent: #fff; /* Colore del contorno del fuoco. Sui fondi chiari è l'accento; le superfici scure lo ridichiarano — la regola sta in 10-base.css. */ --fuoco: var(--accent-text); /* ---- filetti ---- */ --line: rgba(36,31,22,.16); --line-strong: rgba(36,31,22,.35); /* ---- logo ---- */ --logo-main: #ac592b; --logo-sub: #868686; /* ---- footer scuro ---- */ --foot-bg: #241f16; --foot-text: #cfc6b6; --foot-muted: #98917f; --foot-line: #423c2e; --foot-logo-main: #e8ddc9; --foot-logo-sub: #98917f; --foot-input-bd: #55503f; /* ---- famiglie ---- Webfont self-hosted (vedi 05-font.css). I fallback di sistema restano in coda: se il woff2 non arriva, la pagina resta leggibile e nella stessa temperatura tipografica. */ --serif: "Source Serif 4", ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif; --sans: "Source Sans 3", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- scala tipografica ---- Nei mockup questi valori erano sparsi nel CSS: qui sono governabili in un punto solo. */ --fs-3xs: 11.5px; /* occhielli, h4 del footer, topbar */ --fs-2xs: 12.5px; /* briciole, metadati delle card */ --fs-xs: 13px; /* chip, ordinamento, etichette */ --fs-sm: 14px; /* navigazione */ --fs-md: 15px; --fs-base: 17px; /* corpo del testo */ --fs-lg: 19px; /* occhiello lungo, titolo di riga in tabella */ --fs-xl: 20px; /* titolo di card */ --fs-2xl: 24px; --fs-3xl: clamp(26px, 3.4vw, 34px); --fs-4xl: clamp(34px, 5vw, 54px); /* h1 */ --fs-4xl-lungo: clamp(26px, 3.2vw, 38px); /* h1 quando il titolo supera i 90 caratteri */ --lh-stretto: 1.05; --lh-titolo: 1.24; --lh-testo: 1.55; --lh-largo: 1.7; /* ---- spaziature, base 4px ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ---- misura ---- */ --wrap-max: 1160px; --gutter: 24px; --misura: 64ch; /* larghezza massima di lettura */ --radius: 3px; --radius-pill: 999px; } /* Variante monocroma: rispecchia la versione grigia del logo. Attivata da (toggle del tema, vedi assets/js/variante.js). */ html.mono{ --accent: #57524a; --accent-text: #57524a; --accent-deep: #3f3b35; --logo-main: #868686; }