/* brainbeez design tokens — M3 ruoli (color / shape / type / state), palette SurferDark. SurferDark è il design system dark-first già in uso su WTP_App (SoT: WTP_App/src/auth/css/surferdark.css + docs/styles/surferdark.md): bg #0e0e0e, surface #181818, elevated #222222, accent #ffd400 (pressed #e6bf00, soft #ffe566, dim #c9a600), text #f4f4f0, muted #9a9a92, divider rgba(244,244,240,.12), hover .08 / selected .14, error #ff6b6b, success #6bcf7f, radius 6/8. I componenti NON definiscono colori hardcoded, solo ruoli --bb-* (regola F01 / PRD FR-13). Contrasti AA su bg #0e0e0e: on-surface #f4f4f0 ≈ 17.5:1, primary #ffd400 ≈ 13.5:1, on-primary #0e0e0e su primary ≈ 13.5:1, muted ≈ 6.8:1, error #ff6b6b ≈ 6.9:1, score-green #6bcf7f ≈ 10:1, outline #6e6e68 ≈ 3.7:1 (soglie AA non-testo 3:1). Valori derivati (non canone SurferDark) segnalati in riga. */ :root { color-scheme: dark; /* SurferDark anchors (canone WTP_App) */ --surferdark-bg: #0e0e0e; --surferdark-surface: #181818; --surferdark-surface-elevated: #222222; --surferdark-accent: #ffd400; --surferdark-accent-pressed: #e6bf00; --surferdark-accent-soft: #ffe566; --surferdark-accent-dim: #c9a600; --surferdark-on-accent: #0e0e0e; --surferdark-text: #f4f4f0; --surferdark-text-muted: #9a9a92; --surferdark-outline: #6e6e68; --surferdark-divider: rgba(244, 244, 240, 0.12); --surferdark-selected: rgba(255, 212, 0, 0.14); --surferdark-error: #ff6b6b; --surferdark-success: #6bcf7f; --surferdark-info: #6ea8fe; /* derivato: blu non nel canone; AA su bg ≈ 8:1 */ --surferdark-radius-sm: 6px; --surferdark-radius-md: 8px; /* Color roles → SurferDark */ --bb-primary: var(--surferdark-accent); --bb-on-primary: var(--surferdark-on-accent); /* container = tinta selected .14 del canone (flash animazione move, F04) */ --bb-primary-container: var(--surferdark-selected); --bb-on-primary-container: var(--surferdark-accent); --bb-secondary: var(--surferdark-accent-pressed); --bb-on-secondary: var(--surferdark-on-accent); --bb-secondary-container: rgba(230, 191, 0, 0.14); --bb-on-secondary-container: var(--surferdark-accent-pressed); --bb-tertiary: var(--surferdark-accent-soft); --bb-on-tertiary: var(--surferdark-on-accent); --bb-tertiary-container: rgba(255, 229, 102, 0.14); --bb-on-tertiary-container: var(--surferdark-accent-soft); --bb-error: var(--surferdark-error); --bb-on-error: var(--surferdark-on-accent); --bb-error-container: rgba(255, 107, 107, 0.14); --bb-on-error-container: var(--surferdark-error); /* Semaforo credit score (F05): verde=success, giallo=primary, rosso=error, ND=outline */ --bb-score-green: var(--surferdark-success); /* Colonne del processo (Q34 → Q39/S26): next=grigio (eredita la tinta del vecchio backlog), contacted=blu, follow-up=giallo, won=verde, lost=rosso. Il backlog non è colonna: stato pre-board (lista in lightbox) che mantiene la sua tinta grigia per titolo/righe. Accent = tinte piene (titoli, AA ≥ 5:1 sul proprio container); container = tinta all'alpha selected .14 del canone SurferDark. */ --bb-column-backlog: var(--surferdark-text-muted); --bb-column-backlog-container: rgba(154, 154, 146, 0.14); --bb-column-next: var(--surferdark-text-muted); --bb-column-next-container: rgba(154, 154, 146, 0.14); --bb-column-contacted: var(--surferdark-info); --bb-column-contacted-container: rgba(110, 168, 254, 0.14); --bb-column-follow-up: var(--surferdark-accent); --bb-column-follow-up-container: var(--surferdark-selected); --bb-column-won: var(--surferdark-success); --bb-column-won-container: rgba(107, 207, 127, 0.14); --bb-column-lost: var(--surferdark-error); --bb-column-lost-container: rgba(255, 107, 107, 0.14); --bb-surface: var(--surferdark-bg); /* input e sheet su fondo pagina, come nel canone SurferDark */ --bb-surface-container-lowest: var(--surferdark-bg); --bb-surface-container-low: #141414; /* derivato: rampa bg→surface */ --bb-surface-container: var(--surferdark-surface); --bb-surface-container-high: #1d1d1d; /* derivato: rampa surface→elevated */ --bb-surface-container-highest: var(--surferdark-surface-elevated); --bb-on-surface: var(--surferdark-text); --bb-on-surface-variant: var(--surferdark-text-muted); --bb-outline: var(--surferdark-outline); --bb-outline-variant: var(--surferdark-divider); --bb-inverse-surface: var(--surferdark-text); --bb-inverse-on-surface: var(--surferdark-bg); --bb-inverse-primary: var(--surferdark-accent-dim); --bb-scrim: #000000; --bb-shadow: #000000; /* Shape roles — radius canone SurferDark su sm/md, scala M3 derivata sugli altri */ --bb-shape-xs: 4px; --bb-shape-sm: var(--surferdark-radius-sm); --bb-shape-md: var(--surferdark-radius-md); --bb-shape-lg: 12px; --bb-shape-xl: 16px; --bb-shape-full: 999px; /* Type roles — scale M3 invariata; font stack del canone SurferDark */ --bb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bb-type-display-lg: 2.25rem; --bb-type-display-md: 1.8rem; --bb-type-headline-lg: 1.6rem; --bb-type-headline-md: 1.4rem; --bb-type-title-lg: 1.25rem; --bb-type-title-md: 1rem; --bb-type-body-lg: 1rem; --bb-type-body-md: 0.875rem; --bb-type-body-sm: 0.75rem; --bb-type-label-lg: 0.875rem; --bb-type-label-md: 0.75rem; --bb-leading-normal: 1.5; --bb-weight-regular: 400; --bb-weight-medium: 500; --bb-weight-bold: 700; /* State layer roles (M3 opacity; hover .08 = alpha canone SurferDark) */ --bb-state-hover: 0.08; --bb-state-focus: 0.12; --bb-state-pressed: 0.12; --bb-state-drag: 0.16; --bb-state-disabled-content: 0.38; /* Elevation roles — su sfondo scuro le ombre M3 non si vedono: ombra nera + ring divider, coerente coi bordi del canone SurferDark */ --bb-elevation-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 0 0 1px var(--bb-outline-variant); --bb-elevation-2: 0 2px 6px rgb(0 0 0 / 0.55), 0 0 0 1px var(--bb-outline-variant); --bb-elevation-3: 0 4px 24px rgb(0 0 0 / 0.6), 0 0 0 1px var(--bb-outline-variant); /* Motion roles */ --bb-motion-duration-short: 200ms; --bb-motion-duration-medium: 350ms; --bb-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); } /* Binding attributo → ruoli colonna (processo a 5 stati, Q34 → Q39): qualunque elemento dichiari data-column (colonne board, badge archivio, lightbox backlog) eredita accento e tinta dello stato. I componenti restano senza hex hardcoded (regola F01) e non duplicano la mappa. */ [data-column="backlog"] { --bb-column-accent: var(--bb-column-backlog); --bb-column-container: var(--bb-column-backlog-container); } [data-column="next"] { --bb-column-accent: var(--bb-column-next); --bb-column-container: var(--bb-column-next-container); } [data-column="contacted"] { --bb-column-accent: var(--bb-column-contacted); --bb-column-container: var(--bb-column-contacted-container); } [data-column="follow_up"] { --bb-column-accent: var(--bb-column-follow-up); --bb-column-container: var(--bb-column-follow-up-container); } [data-column="won"] { --bb-column-accent: var(--bb-column-won); --bb-column-container: var(--bb-column-won-container); } [data-column="lost"] { --bb-column-accent: var(--bb-column-lost); --bb-column-container: var(--bb-column-lost-container); }