/* ============================================================================ FARO — tokens.css Fonte di verità unica dei design token. CSS puro, framework-agnostic. Consumato da: app Hono/Workers (worker/src), landing Astro, styleguide. NON incastonare più i token nella landing o in ui.tsx: importare QUESTO file. Architettura a DUE LIVELLI (dipendenza a senso unico): 1. PRIMITIVE --faro-{categoria}-{scala} (valori grezzi, theme-agnostic) 2. SEMANTIC --faro-{contesto}-{proprietà}-{variante} (l'unico layer themeable) REGOLA DURA: nessun componente consuma una primitive direttamente. Se un componente referenzia --faro-blue-… o --faro-amber-… è un BUG (rende lo "swap test" verificabile meccanicamente: grep dei primitive fuori da questo file = zero match). Tema: le SEMANTIC si rimappano sotto [data-theme="light|dark"] su . Le PRIMITIVE restano costanti. Default = prefers-color-scheme, override utente persistito (snippet anti-FOUC nell'head, lato app/landing). Email transazionali: NON importano questo file → usano valori COMPILATI (build step / file derivato). Vedi digest.ts. ============================================================================ */ /* --------------------------------------------------------------------------- 1. PRIMITIVE — palette grezza (non usare direttamente nei componenti) --------------------------------------------------------------------------- */ :root { /* Abisso — blu-petrolio freddo: superfici dark + inchiostro su light. Scala per luminosità crescente. */ --faro-abisso-950: #081117; /* più profondo: desk/navy dark */ --faro-abisso-900: #0b1c24; /* navy (blocchi inverse su light) */ --faro-abisso-870: #0e1519; /* page bg dark */ --faro-abisso-820: #16232a; /* surface dark */ --faro-abisso-780: #1d2b32; /* surface sunken dark */ --faro-abisso-680: #26343a; /* border dark */ --faro-abisso-500: #3a4a52; /* border-strong dark (derivato) */ /* Slate — neutro freddo del testo. */ --faro-slate-800: #15252d; /* inchiostro su light / bottone solido */ --faro-slate-500: #5e6a6f; /* testo muted su light */ --faro-slate-300: #93a0a3; /* testo muted su dark */ --faro-slate-050: #eef2f0; /* inchiostro su dark */ /* Paper — neutro caldo: superfici light + testo su blocchi inverse. */ --faro-white: #ffffff; /* surface raised light */ --faro-paper-050: #f4f1ea; /* testo caldo su navy/solid */ --faro-paper-100: #f1f3f2; /* surface sunken light */ --faro-paper-150: #eaedec; /* page bg light */ --faro-paper-200: #d7dcda; /* border light */ --faro-paper-300: #c4ccc9; /* border-strong light (derivato) */ --faro-desk-100: #dfe3e2; /* desk dietro la shell (light) */ /* Ambra del faro — "dalla tua parte": fascio, glow, score, CTA. Usare con parsimonia. */ --faro-amber-300: #e6c68a; /* glow/lanterna (illustrazione) */ --faro-amber-400: #d3a869; /* ambra su dark (testo/gold) */ --faro-amber-500: #cfa063; /* gold su dark */ --faro-amber-600: #b0824a; /* gold su light (fascio/icona) */ --faro-amber-700: #8a6533; /* ambra-testo su light (AA su bianco) */ --faro-amber-800: #9a6a1c; /* testo warning su light */ --faro-amber-soft-l: #efe7d8;/* ambra soft bg (light) */ --faro-amber-soft-d: #241f16;/* ambra soft bg (dark) */ --faro-warn-soft-l: #f3e9d4;/* warning soft bg (light) */ --faro-warn-soft-d: #2a2213;/* warning soft bg (dark) */ /* Verde — match forte / success (lo score alto). */ --faro-green-600: #4f8468; /* success su light */ --faro-green-400: #7fb094; /* success su dark */ --faro-green-soft-l: #e2ece4; --faro-green-soft-d: #1c2a22; /* Rosso — danger (red flag ghost/repost). NON è ambra: deve leggersi come allerta, non come brand. */ --faro-red-500: #a8382d; /* danger su light */ --faro-red-400: #e07a6f; /* danger su dark */ --faro-red-soft-l: rgba(168, 56, 45, 0.10); --faro-red-soft-d: rgba(224, 122, 111, 0.13); /* Teal — accento "segnale" (eredità radar, ora punto di luce). */ --faro-teal-500: #7ea996; /* su light */ --faro-teal-400: #82b09c; /* su dark */ /* Info — freddo cyan-petrolio: NUOVO, distinto da teal e ambra. */ --faro-info-600: #2f6d84; /* info su light */ --faro-info-400: #86bcd2; /* info su dark */ --faro-info-soft-l: #dfeaef; --faro-info-soft-d: #16262d; /* Hairline ambra (regola sottile "strumentale"). */ --faro-rule-l: rgba(176, 130, 74, 0.32); --faro-rule-d: rgba(207, 160, 99, 0.30); /* ---- Primitive non-colore (theme-agnostic, nessun layer semantic) ---- */ /* Spacing — scala 4px. */ --faro-space-0: 0; --faro-space-1: 0.25rem; /* 4px */ --faro-space-2: 0.5rem; /* 8px */ --faro-space-3: 0.75rem; /* 12px */ --faro-space-4: 1rem; /* 16px */ --faro-space-5: 1.5rem; /* 24px */ --faro-space-6: 2rem; /* 32px */ --faro-space-7: 3rem; /* 48px */ --faro-space-8: 4rem; /* 64px */ /* Radius. */ --faro-radius-sm: 9px; --faro-radius-lg: 13px; --faro-radius-pill: 99px; --faro-radius-full: 50%; /* Tipografia — ≤2 famiglie self-hosted (Bricolage variable + IBM Plex Mono). Il mono è il "carattere strumentale" (score/eyebrow/dati): eccezione al "solo tabular-nums" motivata e loggata in DECISIONS.md. */ --faro-font-display: "Bricolage Grotesque", Georgia, serif; --faro-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --faro-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Scala tipografica — modulare ~1.25. */ --faro-fs-xs: 0.75rem; /* 12px — micro/eyebrow */ --faro-fs-sm: 0.875rem; /* 14px — meta */ --faro-fs-base: 1rem; /* 16px — corpo */ --faro-fs-md: 1.1875rem; /* 19px — lead */ --faro-fs-lg: 1.6875rem; /* 27px — h3 */ --faro-fs-xl: 2.375rem; /* 38px — h2 */ --faro-fs-2xl: 2.875rem; /* 46px — h1 */ --faro-lh-tight: 1.08; --faro-lh-snug: 1.35; --faro-lh-body: 1.6; /* Motion — NUOVO. Solo transform/opacity nei consumer. */ --faro-dur-fast: 120ms; --faro-dur-base: 240ms; --faro-dur-slow: 480ms; --faro-dur-beam: 7s; /* il fascio del faro che scandaglia */ --faro-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --faro-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --faro-ease-beam: linear; /* sweep costante */ } /* --------------------------------------------------------------------------- 2. SEMANTIC — l'unico layer themeable. Default = LIGHT. Ogni componente consuma SOLO questi. --------------------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; /* Superfici */ --faro-surface-bg: var(--faro-paper-150); /* sfondo pagina */ --faro-surface-raised: var(--faro-white); /* card, pannelli */ --faro-surface-sunken: var(--faro-paper-100); /* inset, track, wells */ --faro-surface-desk: var(--faro-desk-100); /* desk dietro la shell */ --faro-surface-inverse: var(--faro-slate-800); /* blocco scuro su light */ /* Testo */ --faro-text-strong: var(--faro-slate-800); /* titoli, corpo forte */ --faro-text-muted: var(--faro-slate-500); /* secondario */ --faro-text-on-inverse: var(--faro-paper-050); /* su surface-inverse/navy */ --faro-text-link: var(--faro-amber-700); /* link (ambra-testo AA) */ --faro-text-link-hover: var(--faro-amber-600); /* Bordi / regole */ --faro-border: var(--faro-paper-200); --faro-border-strong: var(--faro-paper-300); --faro-border-rule: var(--faro-rule-l); /* hairline ambra strumentale */ /* Brand — ambra del faro */ --faro-brand-amber: var(--faro-amber-600); /* il fascio, icona, glow */ --faro-brand-amber-text: var(--faro-amber-700); /* ambra come testo (AA) */ --faro-brand-amber-soft: var(--faro-amber-soft-l); --faro-brand-navy: var(--faro-abisso-900); /* CTA primaria — ambra con testo scuro (bianco su ambra fallisce AA) */ --faro-cta-bg: var(--faro-amber-600); --faro-cta-bg-hover: var(--faro-amber-400); /* si ACCENDE (più chiara), non si spegne */ --faro-cta-hover-shadow: var(--faro-shadow-lg); /* light: ombra definita, NON glow (su chiaro sporca) */ --faro-cta-text: var(--faro-abisso-950); /* near-black → AA su ambra: default 5,6:1, hover 8,8:1 */ /* Azione neutra / secondaria — solido inchiostro (slab scuro su light) */ --faro-action-bg: var(--faro-slate-800); /* Accento ambra su slab inverso (freccia CTA): qui lo slab è SCURO → ambra chiara */ --faro-cta-accent: var(--faro-amber-500); --faro-action-text: var(--faro-paper-050); /* Score — readout strumentale */ --faro-score-text: var(--faro-green-600); /* il numero (match forte) */ --faro-score-ring: var(--faro-green-600); /* riempimento conic */ --faro-score-track: var(--faro-paper-100); /* traccia dietro il ring */ /* Scala status — bg / text / border, tutte AA. Danger ≠ ambra. */ --faro-success-bg: var(--faro-green-soft-l); --faro-success-text: var(--faro-green-600); --faro-success-border: var(--faro-green-600); --faro-warning-bg: var(--faro-warn-soft-l); --faro-warning-text: var(--faro-amber-800); --faro-warning-border: var(--faro-amber-800); --faro-danger-bg: var(--faro-red-soft-l); --faro-danger-text: var(--faro-red-500); --faro-danger-border: var(--faro-red-500); --faro-info-bg: var(--faro-info-soft-l); --faro-info-text: var(--faro-info-600); --faro-info-border: var(--faro-info-600); /* Accento segnale */ --faro-signal-teal: var(--faro-teal-500); /* Focus — WCAG 2.4.7. Mai outline:none senza sostituto. */ --faro-focus-ring: var(--faro-amber-700); --faro-focus-ring-offset: 2px; /* Elevazione + glow del faro */ --faro-shadow-sm: 0 1px 3px rgba(20, 25, 40, 0.05), 0 14px 40px rgba(20, 25, 40, 0.06); --faro-shadow-lg: 0 20px 50px -28px rgba(10, 25, 32, 0.35); --faro-glow-amber: 0 0 12px 3px rgba(207, 160, 99, 0.35); } /* ---- DARK — rimappa le sole semantic sulle primitive scure ---- */ [data-theme="dark"] { color-scheme: dark; --faro-surface-bg: var(--faro-abisso-870); --faro-surface-raised: var(--faro-abisso-820); --faro-surface-sunken: var(--faro-abisso-780); --faro-surface-desk: var(--faro-abisso-950); --faro-surface-inverse: var(--faro-slate-050); --faro-text-strong: var(--faro-slate-050); --faro-text-muted: var(--faro-slate-300); --faro-text-on-inverse: var(--faro-abisso-870); --faro-text-link: var(--faro-amber-400); --faro-text-link-hover: var(--faro-amber-300); --faro-border: var(--faro-abisso-680); --faro-border-strong: var(--faro-abisso-500); --faro-border-rule: var(--faro-rule-d); --faro-brand-amber: var(--faro-amber-500); --faro-brand-amber-text: var(--faro-amber-400); --faro-brand-amber-soft: var(--faro-amber-soft-d); --faro-brand-navy: var(--faro-abisso-950); --faro-cta-bg: var(--faro-amber-500); --faro-cta-bg-hover: var(--faro-amber-400); --faro-cta-hover-shadow: var(--faro-glow-amber); /* dark: il glow del faro si accende sul buio */ --faro-cta-text: var(--faro-abisso-950); --faro-action-bg: var(--faro-slate-050); --faro-cta-accent: var(--faro-amber-700); /* slab CHIARO su dark → ambra scura */ --faro-action-text: var(--faro-abisso-870); --faro-score-text: var(--faro-green-400); --faro-score-ring: var(--faro-green-400); --faro-score-track: var(--faro-abisso-780); --faro-success-bg: var(--faro-green-soft-d); --faro-success-text: var(--faro-green-400); --faro-success-border: var(--faro-green-400); --faro-warning-bg: var(--faro-warn-soft-d); --faro-warning-text: var(--faro-amber-400); --faro-warning-border: var(--faro-amber-400); --faro-danger-bg: var(--faro-red-soft-d); --faro-danger-text: var(--faro-red-400); --faro-danger-border: var(--faro-red-400); --faro-info-bg: var(--faro-info-soft-d); --faro-info-text: var(--faro-info-400); --faro-info-border: var(--faro-info-400); --faro-signal-teal: var(--faro-teal-400); --faro-focus-ring: var(--faro-amber-400); --faro-focus-ring-offset: 2px; --faro-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 18px 50px rgba(0, 0, 0, 0.5); --faro-shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.6); --faro-glow-amber: 0 0 14px 4px rgba(230, 198, 138, 0.30); } /* Default di sistema: dark quando l'utente non ha scelto e l'OS è dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --faro-surface-bg: var(--faro-abisso-870); --faro-surface-raised: var(--faro-abisso-820); --faro-surface-sunken: var(--faro-abisso-780); --faro-surface-desk: var(--faro-abisso-950); --faro-surface-inverse: var(--faro-slate-050); --faro-text-strong: var(--faro-slate-050); --faro-text-muted: var(--faro-slate-300); --faro-text-on-inverse: var(--faro-abisso-870); --faro-text-link: var(--faro-amber-400); --faro-text-link-hover: var(--faro-amber-300); --faro-border: var(--faro-abisso-680); --faro-border-strong: var(--faro-abisso-500); --faro-border-rule: var(--faro-rule-d); --faro-brand-amber: var(--faro-amber-500); --faro-brand-amber-text: var(--faro-amber-400); --faro-brand-amber-soft: var(--faro-amber-soft-d); --faro-brand-navy: var(--faro-abisso-950); --faro-cta-bg: var(--faro-amber-500); --faro-cta-bg-hover: var(--faro-amber-400); --faro-cta-hover-shadow: var(--faro-glow-amber); --faro-cta-text: var(--faro-abisso-950); --faro-action-bg: var(--faro-slate-050); --faro-cta-accent: var(--faro-amber-700); --faro-action-text: var(--faro-abisso-870); --faro-score-text: var(--faro-green-400); --faro-score-ring: var(--faro-green-400); --faro-score-track: var(--faro-abisso-780); --faro-success-bg: var(--faro-green-soft-d); --faro-success-text: var(--faro-green-400); --faro-success-border: var(--faro-green-400); --faro-warning-bg: var(--faro-warn-soft-d); --faro-warning-text: var(--faro-amber-400); --faro-warning-border: var(--faro-amber-400); --faro-danger-bg: var(--faro-red-soft-d); --faro-danger-text: var(--faro-red-400); --faro-danger-border: var(--faro-red-400); --faro-info-bg: var(--faro-info-soft-d); --faro-info-text: var(--faro-info-400); --faro-info-border: var(--faro-info-400); --faro-signal-teal: var(--faro-teal-400); --faro-focus-ring: var(--faro-amber-400); --faro-focus-ring-offset: 2px; --faro-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 18px 50px rgba(0, 0, 0, 0.5); --faro-shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.6); --faro-glow-amber: 0 0 14px 4px rgba(230, 198, 138, 0.30); } } /* Focus ring globale — sostituto sempre presente, mai outline:none nudo. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--faro-focus-ring); outline-offset: var(--faro-focus-ring-offset); border-radius: var(--faro-radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }