/* * tokens.css — variabili di base del design system DrawScope. * Solo custom properties, dentro @layer tokens (ordine dei layer dichiarato * in base.css: `@layer tokens, base, components, pages;`). * * Contrasti calcolati con la formula di luminanza relativa WCAG 2.x * (script Python throwaway, non incluso nel repository). Soglie: testo * normale >= 4.5:1, testo grande / componenti UI >= 3:1. Ogni coppia * effettivamente usata nel design system è misurata qui accanto al token. */ @layer tokens { :root { /* ---- Temi: chiaro/scuro nativi, radice segue il sistema ---- */ color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ================= Colore — scala neutra (grigio freddo) ================= * Leggermente virata verso il blu (non un grigio puro) per restare * coerente con l'accento e con l'aspetto "strumento tecnico". */ --gray-50: #f7f8fa; --gray-100: #eef1f4; --gray-200: #dfe3e8; --gray-300: #c3c9d1; --gray-400: #9aa3af; --gray-500: #717a87; --gray-600: #565f6b; --gray-700: #3f4650; --gray-800: #282d34; --gray-900: #181b20; --gray-950: #0e1013; /* Grigio "rinforzato" per bordi di componenti interattivi (input, select): * il gray-300/400 "decorativo" non basta per il requisito UI >= 3:1. */ --gray-border-strong-light: #8790a0; /* vs #fff = 3.22:1 */ --gray-border-strong-dark: var(--gray-500); /* vs gray-900 = 3.98:1 */ /* ================= Colore — accento unico ================= * Un solo blu petrolio (hue ~203°, "blueprint"): richiama il disegno * tecnico su carta, resta calmo e professionale, ed è nettamente * distinto da viola/violetto e dai gradienti da SaaS generico. * accent-600 è usato invariato nei due temi (pulsanti pieni, selezione * dell'editor): a quella luminanza il contrasto con testo bianco (5.55:1) * e con il bordo pagina scuro (3.11:1 su gray-900) resta valido ovunque, * quindi non serve una variante per tema. */ --accent-50: #eff6fa; --accent-100: #dfedf6; --accent-200: #bfdced; --accent-300: #76b4db; /* testo/icone/focus ring su sfondo scuro */ --accent-400: #469ace; --accent-500: #2d7aa9; /* link su sfondo chiaro: vs #fff = 4.70:1 */ --accent-600: #296e99; /* fill pulsanti/selezione, invariato nei due temi */ --accent-700: #225d81; /* hover/attivo; testo su sfondo chiaro; focus ring chiaro */ --accent-800: #1c4b69; --accent-900: #153a51; /* ================= Colore — semantici (solo per stati) ================= * Stesso schema dell'accento: una tinta "-600" piena (testo bianco, * badge/pulsante/barra di stato) valida in entrambi i temi, più una * tinta "-700"/"-300" per testo/icone su sfondo chiaro/scuro. */ --success-600: #257e55; /* vs #fff = 5.01:1 · vs gray-900 = 3.45:1 */ --success-700: #1e6745; /* testo su bianco = 6.82:1 */ --success-300: #71d6a7; /* testo su gray-900 = 9.76:1 */ --warning-600: #97640c; /* vs #fff = 5.07:1 · vs gray-900 = 3.41:1 */ --warning-700: #7b510a; /* testo su bianco = 6.95:1 */ --warning-300: #f1b855; /* testo su gray-900 = 9.64:1 */ --danger-600: #d9363b; /* vs #fff = 4.62:1 · vs gray-900 = 3.73:1 */ --danger-700: #b42227; /* testo su bianco = 6.57:1 */ --danger-300: #e77e82; /* testo su gray-900 = 6.33:1 */ /* ================= Colore — ruoli (light-dark) ================= * Coppie testo/sfondo misurate: * - testo principale vs sfondo pagina: 16.25:1 (chiaro) / 17.93:1 (scuro) * - testo principale vs superficie carta: 17.26:1 (chiaro) / 16.25:1 (scuro) * - testo attenuato vs sfondo pagina: 6.09:1 (chiaro) / 7.47:1 (scuro) * - testo attenuato vs superficie: 6.47:1 (chiaro) / 6.77:1 (scuro) * - bordo "rinforzato" vs superficie: 3.22:1 (chiaro) / 3.98:1 (scuro) */ --color-bg: light-dark(var(--gray-50), var(--gray-950)); --color-surface: light-dark(#ffffff, var(--gray-900)); --color-surface-2: light-dark(var(--gray-100), var(--gray-800)); --color-text: light-dark(var(--gray-900), var(--gray-50)); --color-text-muted: light-dark(var(--gray-600), var(--gray-400)); --color-border: light-dark(var(--gray-200), var(--gray-700)); --color-border-strong: light-dark( var(--gray-border-strong-light), var(--gray-border-strong-dark) ); --color-accent: var(--accent-600); --color-accent-hover: var(--accent-700); --color-accent-contrast: #ffffff; /* testo/icona sopra --color-accent: 5.55:1 */ /* Testo con la tinta dell'accento (link, icone attive): deve schiarire * nel tema scuro, altrimenti scende sotto 4.5:1 su sfondo scuro. */ --color-accent-text: light-dark(var(--accent-700), var(--accent-300)); --color-success: var(--success-600); --color-success-text: light-dark(var(--success-700), var(--success-300)); --color-warning: var(--warning-600); --color-warning-text: light-dark(var(--warning-700), var(--warning-300)); --color-danger: var(--danger-600); --color-danger-text: light-dark(var(--danger-700), var(--danger-300)); /* "Info" riusa l'unico accento: niente seconda tinta per un ruolo che è * comunque neutro/informativo, non uno stato di successo/errore. */ --color-info: var(--accent-600); --color-info-text: var(--color-accent-text); /* Anello di focus: due tinte scelte per restare >= 3:1 su TUTTE le * superfici di sfondo realmente usate nel tema (misurato, non solo * contro bianco/nero puri): * chiaro (accent-700) vs #fff = 7.12:1, vs gray-50 = 6.70:1 * scuro (accent-300) vs gray-900 = 7.66:1, vs gray-950 = 8.46:1, * vs gray-800 (superfici elevate) = 6.15:1 */ --color-focus-ring: light-dark(var(--accent-700), var(--accent-300)); /* La tavola tecnica resta carta bianca con inchiostro nero in entrambi * i temi: non usa light-dark(), è sempre la stessa. */ --color-paper: #ffffff; --color-paper-ink: #000000; /* Editor: la selezione deve leggersi sia sopra la carta bianca sia sopra * il tratto nero del disegno. * contorno selezione (--accent-600) vs carta bianca = 5.55:1 * contorno selezione (--accent-600) vs tratto nero = 3.78:1 * bordo maniglia (--accent-600) vs riempimento bianco maniglia = 5.55:1 * riempimento maniglia bianco vs tratto nero = 21.00:1 (netto) * La maniglia (bianca con bordo accento) resta quindi leggibile anche * sul tratto più scuro; il contorno della selezione da solo supera già * 3:1 su entrambi gli estremi, senza bisogno di un alone aggiuntivo. */ --color-selection-outline: var(--accent-600); --color-selection-handle-fill: #ffffff; --color-selection-handle-border: var(--accent-600); /* Oscuramento dell'area esterna alla selezione: trattamento visivo, non * una coppia testo/sfondo — non copre mai la selezione né le maniglie. */ --color-selection-overlay: rgb(8 10 12 / 45%); --color-backdrop: rgb(8 10 12 / 55%); /* ::backdrop di */ /* ================= Tipografia ================= */ --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Scala 12/14/16/20/24/32, in rem (radice 16px) per rispettare lo zoom * di testo del browser/utente. */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-normal: 1.5; --numeric-variant: tabular-nums; /* cifre tabulari per coordinate/numeri */ /* ================= Spaziatura (griglia 4/8px) ================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ================= Raggi ================= */ --radius-control: 6px; --radius-card: 10px; --radius-full: 999px; /* ================= Ombre (due livelli, discrete) ================= */ --shadow-1: 0 1px 2px light-dark(rgb(15 23 32 / 8%), rgb(0 0 0 / 45%)), 0 1px 1px light-dark(rgb(15 23 32 / 4%), rgb(0 0 0 / 30%)); --shadow-2: 0 12px 32px light-dark(rgb(15 23 32 / 14%), rgb(0 0 0 / 55%)), 0 2px 8px light-dark(rgb(15 23 32 / 8%), rgb(0 0 0 / 35%)); /* ================= Movimento ================= */ --motion-fast: 120ms; --motion-base: 180ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* ================= Livelli (z-index) ================= */ --z-panel: 10; --z-overlay: 20; --z-toast: 100; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; } } }