/* ========================================================================== Brainstorm Club — Design System · Design Tokens (VENDORED COPY) -------------------------------------------------------------------------- Source of truth: https://github.com/Brainstorm-Club/design-system (tokens.css) Vendored at upstream commit 48c1734. WHY VENDORED (not a submodule / CDN link): crit-xp-sheet is a no-build, offline-first PWA that must also work when opened straight from a downloaded ZIP (file://). Bundling the tokens keeps the app fully self-contained and avoids any external request, matching its privacy policy ("no external services"). To refresh: copy the latest tokens.css from the DS repo and update the commit hash above. Default theme is "carbone" (dark, the true brand). The light "carta" theme activates with [data-theme="light"] on . crit-xp-sheet also supports an "auto" mode (follow OS) — see style.css. ========================================================================== */ :root { /* --- Colori di marca (estratti dal logo) ------------------------------ */ --bsc-carbone: #181617; /* fondo brand, nero del logo */ --bsc-rosso: #C2332B; /* rosso mattone "brainstorm", primario */ --bsc-bianco: #F4F1EC; /* bianco caldo "club" */ --bsc-carta: #EFEAE1; /* carta / manuale di gioco (tema chiaro)*/ /* Scala rosso (stati) */ --bsc-rosso-900: #6E1C16; --bsc-rosso-700: #9E2820; --bsc-rosso-600: #C2332B; /* base */ --bsc-rosso-400: #D9584E; --bsc-rosso-200: #EB9B95; /* Neutri caldi (virati verso il rosso, non grigi puri) */ --bsc-neutro-950: #131112; --bsc-neutro-900: #1E1B1C; --bsc-neutro-800: #2A2626; --bsc-neutro-700: #3B3636; --bsc-neutro-600: #55504F; --bsc-neutro-500: #726B6A; --bsc-neutro-400: #8A8180; --bsc-neutro-300: #ABA3A1; --bsc-neutro-200: #CFC8C4; --bsc-neutro-100: #E6E0DA; --bsc-neutro-50: #F4F1EC; /* Semantici (distinti dall'accento) */ --bsc-successo: #4C8C63; /* tavolo/partita disponibile */ --bsc-attenzione: #D19A2E; /* posti limitati */ --bsc-errore: #C2332B; /* coincide col brand, usare con parsimonia */ --bsc-info: #4E7A8C; /* --- Tipografia ------------------------------------------------------- */ --bsc-font-display: "Courier Prime", "Courier New", "Courier", ui-monospace, monospace; --bsc-font-mono: "Courier Prime", "Courier New", ui-monospace, monospace; --bsc-font-body: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Scala tipografica (terza maggiore, 1.25 · base 16px) */ --bsc-text-xs: 0.75rem; /* 12 */ --bsc-text-sm: 0.875rem; /* 14 */ --bsc-text-base: 1rem; /* 16 */ --bsc-text-lg: 1.25rem; /* 20 */ --bsc-text-xl: 1.5625rem; /* 25 */ --bsc-text-2xl: 1.953rem; /* 31 */ --bsc-text-3xl: 2.441rem; /* 39 */ --bsc-text-4xl: 3.052rem; /* 49 */ --bsc-text-5xl: 3.815rem; /* 61 */ --bsc-leading-tight: 1.15; --bsc-leading-snug: 1.35; --bsc-leading-body: 1.6; --bsc-tracking-tight: -0.01em; --bsc-tracking-label: 0.14em; /* label maiuscole */ /* --- Spaziatura (base 4px) ------------------------------------------- */ --bsc-space-1: 0.25rem; /* 4 */ --bsc-space-2: 0.5rem; /* 8 */ --bsc-space-3: 0.75rem; /* 12 */ --bsc-space-4: 1rem; /* 16 */ --bsc-space-5: 1.5rem; /* 24 */ --bsc-space-6: 2rem; /* 32 */ --bsc-space-7: 3rem; /* 48 */ --bsc-space-8: 4rem; /* 64 */ --bsc-space-9: 6rem; /* 96 */ /* --- Raggi ------------------------------------------------------------ */ --bsc-radius-none: 0; --bsc-radius-sm: 3px; --bsc-radius-md: 6px; --bsc-radius-lg: 12px; --bsc-radius-pill: 999px; /* Bordo "disegnato a mano" — firma del brand, richiama il brain doodle */ --bsc-radius-sketch: 255px 15px 225px 15px / 15px 225px 15px 255px; /* --- Bordi & ombre --------------------------------------------------- */ --bsc-border-hairline: 1px solid var(--bsc-neutro-700); --bsc-border-ink: 2px solid var(--bsc-bianco); --bsc-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --bsc-shadow-md: 0 4px 16px rgba(0,0,0,.45); --bsc-shadow-pop: 4px 4px 0 var(--bsc-rosso); /* ombra piena "stampa" */ /* --- Sfondi & griglia ------------------------------------------------ */ /* Lo sfondo preferito del brand è il CARBONE (il nero del logo): è il ground di default via --bsc-bg. Per una sezione sempre scura anche in tema carta (brand moment, cornice del logo) usa la utility .bsc-carbone. La hero ha lo sfondo a "carta millimetrata": griglia di linee tenui che sfuma ai bordi — utility .bsc-grid / .bsc-grid--hero. */ --bsc-grid-line: rgba(244,241,236,.045); /* colore delle linee su carbone */ --bsc-grid-size: 34px; /* passo dei quadretti */ /* --- Marchio / favicon ----------------------------------------------- */ /* Il cervello del logo, ritagliato e ripulito dalla "b" rossa. `assets/brain-mark.png` è una MASCHERA (canale alfa): usala come mask-image su un elemento con background:currentColor, così si ricolora col tema (bianca su carbone, scura su carta) — vedi .bsc-brandmark. `assets/favicon.png` è il favicon già colorato (cervello bianco su carbone, angoli arrotondati) per la scheda del browser: */ --bsc-brand-mark: url("assets/brain-mark.png"); --bsc-favicon: url("assets/favicon.png"); /* --- Layout ---------------------------------------------------------- */ --bsc-container: 72rem; /* 1152px */ --bsc-measure: 65ch; /* larghezza di lettura ideale */ /* --- Motion ---------------------------------------------------------- */ --bsc-ease: cubic-bezier(.2,.7,.3,1); --bsc-dur-fast: 150ms; --bsc-dur-base: 250ms; /* --- Alias semantici di superficie (TEMA CARBONE / scuro, default) --- */ --bsc-bg: var(--bsc-carbone); --bsc-surface: var(--bsc-neutro-900); --bsc-surface-2: var(--bsc-neutro-800); --bsc-border: var(--bsc-neutro-700); --bsc-text: var(--bsc-bianco); --bsc-text-muted: var(--bsc-neutro-300); --bsc-text-faint: #8F8785; /* contrasto AA su carbone anche a corpo piccolo */ --bsc-primary: var(--bsc-rosso-600); --bsc-primary-hover: var(--bsc-rosso-400); --bsc-on-primary: var(--bsc-bianco); --bsc-focus: var(--bsc-rosso-400); } /* --- TEMA CARTA / chiaro ------------------------------------------------ */ :root[data-theme="light"] { --bsc-bg: var(--bsc-carta); --bsc-surface: #FBF8F2; --bsc-surface-2: #F3EEE4; --bsc-border: var(--bsc-neutro-200); --bsc-text: var(--bsc-neutro-950); --bsc-text-muted: var(--bsc-neutro-600); --bsc-text-faint: #615B5A; /* contrasto AA su carta anche a corpo piccolo */ --bsc-primary: var(--bsc-rosso-700); --bsc-primary-hover: var(--bsc-rosso-900); --bsc-on-primary: var(--bsc-bianco); --bsc-focus: var(--bsc-rosso-700); --bsc-grid-line: rgba(24,22,23,.05); /* linee della griglia su carta */ --bsc-border-ink: 2px solid var(--bsc-neutro-950); --bsc-shadow-sm: 0 1px 2px rgba(24,22,23,.12); --bsc-shadow-md: 0 6px 20px rgba(24,22,23,.14); } @media (prefers-reduced-motion: reduce) { :root { --bsc-dur-fast: 0ms; --bsc-dur-base: 0ms; } }