/* ========================================================================== STORMO DESIGN SYSTEM — Goose Media Lab stormo-tokens.css · v0.1.0-draft (16 agosto 2026) -------------------------------------------------------------------------- Sorgente di verità provvisoria dei token (in attesa del file DTCG .tokens.json da cui questo CSS verrà GENERATO con Style Dictionary). Prefisso: --st-* · Colore: OKLCH · Tema: light-dark() + color-scheme Assi di variazione (attributi sul o su un contenitore): data-theme="light|dark" (default: segue prefers-color-scheme) data-expression="carta|volo" (Carta = editoriale · Volo = energica) data-density="comfortable|compact" data-brand="" (white-label: sovrascrive SOLO il livello brand) Livelli: 1 primitive → 2 brand → 3 semantici → 4 componente ========================================================================== */ @layer st.tokens { /* ---------- 1. PRIMITIVE ------------------------------------------------ */ /* NOTA SULLA CASCATA. Le custom property che contengono var() si risolvono sull'elemento che le dichiara: per questo i token DERIVATI (scala neutra, semantici) sono dichiarati anche su ogni elemento con data-theme / data-expression / data-brand, così un contenitore interno "volo" o "dark" o brandizzato li ricalcola. I token LETTERALI restano solo su :root (si ereditano). */ :root { color-scheme: light dark; /* Tinta dei neutri: 75 = caldo "piuma/carta" (Carta) · 255 = freddo "ardesia" (Volo) */ --st-hue-neutral: 75; /* BECCO — arancio caldo (accento primario Goose) */ --st-becco-50: oklch(97% 0.020 60); --st-becco-100: oklch(93% 0.050 58); --st-becco-200: oklch(87% 0.090 55); --st-becco-300: oklch(80% 0.140 52); --st-becco-400: oklch(74% 0.170 50); --st-becco-500: oklch(68% 0.190 47); --st-becco-600: oklch(60% 0.190 44); --st-becco-700: oklch(51% 0.170 41); --st-becco-800: oklch(42% 0.140 38); --st-becco-900: oklch(34% 0.110 36); /* CIELO — ciano elettrico (accento secondario, dati, evidenze) */ --st-cielo-50: oklch(97% 0.020 205); --st-cielo-100: oklch(93% 0.050 205); --st-cielo-200: oklch(87% 0.090 205); --st-cielo-300: oklch(80% 0.120 205); --st-cielo-400: oklch(74% 0.135 205); --st-cielo-500: oklch(63% 0.130 210); /* 3.1:1 su bianco: componenti/grafici AA */ --st-cielo-600: oklch(56% 0.120 215); --st-cielo-700: oklch(47% 0.100 218); --st-cielo-800: oklch(38% 0.080 220); --st-cielo-900: oklch(30% 0.060 222); /* Stato (tinte fisse, non brandizzabili) */ --st-verde-500: oklch(62% 0.150 150); --st-verde-700: oklch(46% 0.130 152); --st-verde-100: oklch(94% 0.050 150); --st-ambra-500: oklch(78% 0.160 85); --st-ambra-700: oklch(50% 0.130 78); /* 5.3:1 su ambra-100 */ --st-ambra-100: oklch(95% 0.060 88); --st-rosso-500: oklch(58% 0.210 27); --st-rosso-700: oklch(46% 0.190 27); --st-rosso-100: oklch(94% 0.040 27); /* Palette DATI (categoriale, 8 serie — da validare per daltonismo) */ --st-data-1: var(--st-becco-500); --st-data-2: var(--st-cielo-500); --st-data-3: oklch(55% 0.160 320); /* prugna */ --st-data-4: oklch(62% 0.140 150); /* verde */ --st-data-5: oklch(64% 0.140 80); /* ocra (il giallo puro non raggiunge 3:1 su bianco) */ --st-data-6: oklch(66% 0.160 5); /* rosa */ --st-data-7: oklch(55% 0.040 255); /* ardesia */ --st-data-8: oklch(50% 0.080 70); /* oliva */ /* Tipografia — famiglie */ --st-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --st-font-sans: "Onest", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --st-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Tipografia — scala fluida (base 16 → 17px; rapporto ~1.2 UI, ~1.25 editoriale) */ --st-text-2xs: 0.6875rem; /* 11 */ --st-text-xs: 0.75rem; /* 12 */ --st-text-sm: 0.875rem; /* 14 */ --st-text-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16→17 */ --st-text-lg: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem); /* 18→20 */ --st-text-xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem); /* 20→24 */ --st-text-2xl: clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem); /* 24→30 */ --st-text-3xl: clamp(1.875rem, 1.65rem + 1vw, 2.375rem); /* 30→38 */ --st-text-4xl: clamp(2.25rem, 1.9rem + 1.6vw, 3rem); /* 36→48 */ --st-text-5xl: clamp(2.75rem, 2.2rem + 2.6vw, 4rem); /* 44→64 */ --st-text-6xl: clamp(3.25rem, 2.4rem + 4vw, 5.25rem); /* 52→84 */ --st-leading-tight: 1.1; --st-leading-snug: 1.25; --st-leading-ui: 1.4; --st-leading-body: 1.6; --st-leading-loose: 1.75; --st-tracking-tight: -0.02em; --st-tracking-normal: 0; --st-tracking-eyebrow: 0.12em; /* occhielli maiuscoli "estesi" (eco del logo MEDIA LAB) */ /* Spazio — base 4px */ --st-space-0: 0; --st-space-1: 0.25rem; /* 4 */ --st-space-2: 0.5rem; /* 8 */ --st-space-3: 0.75rem; /* 12 */ --st-space-4: 1rem; /* 16 */ --st-space-5: 1.25rem; /* 20 */ --st-space-6: 1.5rem; /* 24 */ --st-space-8: 2rem; /* 32 */ --st-space-10: 2.5rem; /* 40 */ --st-space-12: 3rem; /* 48 */ --st-space-16: 4rem; /* 64 */ --st-space-20: 5rem; /* 80 */ --st-space-24: 6rem; /* 96 */ --st-space-32: 8rem; /* 128 */ /* Raggi — DUE REGISTRI: superfici squadrate, controlli morbidi */ --st-radius-none: 0; --st-radius-xs: 2px; /* celle, kbd, code inline */ --st-radius-surface: 6px; /* card, pannelli, dialog, popover, tabelle */ --st-radius-control: 8px; /* input, select, textarea, segmented */ --st-radius-pill: 999px; /* bottoni, tag, badge, avatar, switch */ /* Bordi */ --st-border-w: 1px; --st-border-w-strong: 2px; /* Ombre — solo per elementi FLOTTANTI (menu, popover, dialog). Le card usano il bordo. */ --st-shadow-float: 0 1px 2px oklch(0% 0 0 / 0.06), 0 8px 24px -8px oklch(0% 0 0 / 0.18); --st-shadow-overlay: 0 2px 4px oklch(0% 0 0 / 0.08), 0 24px 48px -12px oklch(0% 0 0 / 0.28); /* Motion — "planata": entrate morbide in decelerazione, uscite rapide */ --st-dur-1: 90ms; /* istante: hover, press, focus */ --st-dur-2: 160ms; /* veloce: toggle, tooltip, badge */ --st-dur-3: 240ms; /* normale: menu, popover, accordion */ --st-dur-4: 400ms; /* lento: dialog, sheet, transizioni di pagina */ --st-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --st-ease-in: cubic-bezier(0.4, 0, 1, 1); --st-ease-inout: cubic-bezier(0.6, 0, 0.2, 1); --st-motion-scale: 1; /* Volo = 0.8 (più scattante) */ --st-lift: 4px; /* "decollo": translateY iniziale delle entrate */ /* Layout */ --st-measure: 68ch; /* larghezza massima del testo corrente */ --st-container-sm: 40rem; --st-container-md: 52rem; --st-container-lg: 72rem; --st-container-xl: 84rem; --st-z-dropdown: 1000; --st-z-sticky: 1100; --st-z-overlay: 1200; --st-z-dialog: 1300; --st-z-toast: 1400; /* Densità (comfortable) */ --st-control-h-sm: 2rem; /* 32 */ --st-control-h-md: 2.5rem; /* 40 */ --st-control-h-lg: 3rem; /* 48 */ --st-control-px: var(--st-space-4); --st-gap-stack: var(--st-space-4); --st-gap-inline: var(--st-space-2); --st-card-p: var(--st-space-6); --st-table-row-h: 3rem; } /* ---------- 1b. NEUTRI DERIVATI (ricalcolati dove cambia la tinta) ---------------- */ :root, [data-theme], [data-expression], [data-brand] { /* Scala neutra: stessa L/C, la tinta cambia con l'espressione */ --st-neutral-0: oklch(99% 0.003 var(--st-hue-neutral)); --st-neutral-50: oklch(97.5% 0.005 var(--st-hue-neutral)); --st-neutral-100: oklch(95% 0.007 var(--st-hue-neutral)); --st-neutral-200: oklch(91% 0.009 var(--st-hue-neutral)); --st-neutral-300: oklch(85% 0.011 var(--st-hue-neutral)); --st-neutral-400: oklch(72% 0.013 var(--st-hue-neutral)); --st-neutral-500: oklch(55% 0.014 var(--st-hue-neutral)); /* 4.7:1 su bianco: testo sottile AA */ --st-neutral-600: oklch(49% 0.014 var(--st-hue-neutral)); --st-neutral-700: oklch(40% 0.013 var(--st-hue-neutral)); --st-neutral-800: oklch(31% 0.012 var(--st-hue-neutral)); --st-neutral-900: oklch(24% 0.011 var(--st-hue-neutral)); --st-neutral-950: oklch(18% 0.010 var(--st-hue-neutral)); --st-neutral-1000: oklch(13% 0.008 var(--st-hue-neutral)); } /* ---------- 2. BRAND (unico livello sovrascrivibile in white-label) --------- */ :root, [data-brand] { --st-brand-primary-50: var(--st-becco-50); --st-brand-primary-100: var(--st-becco-100); --st-brand-primary-200: var(--st-becco-200); --st-brand-primary-300: var(--st-becco-300); --st-brand-primary-400: var(--st-becco-400); --st-brand-primary-500: var(--st-becco-500); --st-brand-primary-600: var(--st-becco-600); --st-brand-primary-700: var(--st-becco-700); --st-brand-primary-800: var(--st-becco-800); --st-brand-primary-900: var(--st-becco-900); --st-brand-secondary-100: var(--st-cielo-100); --st-brand-secondary-300: var(--st-cielo-300); --st-brand-secondary-400: var(--st-cielo-400); --st-brand-secondary-500: var(--st-cielo-500); --st-brand-secondary-600: var(--st-cielo-600); --st-brand-secondary-700: var(--st-cielo-700); /* Testo sopra gli accenti pieni: in Stormo è GRAFITE (6.5:1 su becco-500, 6.2:1 su cielo-500). Un brand white-label con accento scuro lo imposta a var(--st-neutral-0). */ --st-brand-primary-fg: var(--st-neutral-1000); --st-brand-secondary-fg: var(--st-neutral-1000); --st-brand-font-display: var(--st-font-display); --st-brand-font-sans: var(--st-font-sans); --st-brand-radius-surface: var(--st-radius-surface); --st-brand-radius-control: var(--st-radius-control); --st-brand-radius-pill: var(--st-radius-pill); } /* ---------- 3. SEMANTICI (light-dark) ------------------------------------ */ :root, [data-theme], [data-expression], [data-brand] { /* (color-scheme: light dark è dichiarato solo su :root, così un tema forzato si eredita) */ /* Superfici */ --st-bg-canvas: light-dark(var(--st-neutral-50), var(--st-neutral-950)); /* pagina */ --st-bg-surface: light-dark(var(--st-neutral-0), var(--st-neutral-900)); /* card, pannelli */ --st-bg-raised: light-dark(var(--st-neutral-0), var(--st-neutral-800)); /* popover, menu */ --st-bg-sunken: light-dark(var(--st-neutral-100), var(--st-neutral-1000)); /* input, code, well */ --st-bg-muted: light-dark(var(--st-neutral-100), var(--st-neutral-800)); --st-bg-inverse: light-dark(var(--st-neutral-900), var(--st-neutral-50)); --st-bg-overlay: light-dark(oklch(20% 0.01 var(--st-hue-neutral) / 0.45), oklch(5% 0 0 / 0.6)); /* Testo */ --st-fg: light-dark(var(--st-neutral-900), var(--st-neutral-50)); /* grafite, mai nero puro */ --st-fg-muted: light-dark(var(--st-neutral-600), var(--st-neutral-400)); --st-fg-subtle: light-dark(var(--st-neutral-500), var(--st-neutral-500)); --st-fg-inverse: light-dark(var(--st-neutral-0), var(--st-neutral-900)); --st-fg-link: light-dark(var(--st-brand-primary-700), var(--st-brand-primary-300)); /* Bordi */ --st-border: light-dark(var(--st-neutral-200), oklch(100% 0 0 / 0.10)); --st-border-strong: light-dark(var(--st-neutral-300), oklch(100% 0 0 / 0.18)); /* Bordo dei CONTROLLI (input, select, checkbox…): deve raggiungere 3:1 (WCAG 1.4.11) */ --st-border-control: light-dark(oklch(64% 0.013 var(--st-hue-neutral)), oklch(100% 0 0 / 0.36)); --st-border-focus: var(--st-brand-primary-500); /* Accento primario */ --st-primary: light-dark(var(--st-brand-primary-500), var(--st-brand-primary-400)); --st-primary-hover: light-dark(var(--st-brand-primary-600), var(--st-brand-primary-300)); --st-primary-active: light-dark(var(--st-brand-primary-700), var(--st-brand-primary-200)); --st-primary-fg: var(--st-brand-primary-fg); --st-primary-soft: light-dark(var(--st-brand-primary-100), oklch(from var(--st-brand-primary-500) 30% 0.06 h)); --st-primary-soft-fg: light-dark(var(--st-brand-primary-800), var(--st-brand-primary-200)); /* Accento secondario (dati, evidenze, info) */ --st-secondary: light-dark(var(--st-brand-secondary-500), var(--st-brand-secondary-400)); --st-secondary-fg: var(--st-brand-secondary-fg); --st-secondary-soft: light-dark(var(--st-brand-secondary-100), oklch(from var(--st-brand-secondary-500) 30% 0.05 h)); --st-secondary-soft-fg:light-dark(var(--st-brand-secondary-700), var(--st-brand-secondary-300)); /* Stato */ --st-success: light-dark(var(--st-verde-500), oklch(72% 0.14 150)); --st-success-fg: light-dark(var(--st-verde-700), oklch(80% 0.12 150)); --st-success-soft: light-dark(var(--st-verde-100), oklch(28% 0.05 150)); --st-warning: light-dark(var(--st-ambra-500), oklch(82% 0.15 85)); --st-warning-fg: light-dark(var(--st-ambra-700), oklch(85% 0.12 85)); --st-warning-soft: light-dark(var(--st-ambra-100), oklch(30% 0.06 85)); --st-danger: light-dark(var(--st-rosso-500), oklch(68% 0.19 27)); --st-danger-fg: light-dark(var(--st-rosso-700), oklch(78% 0.14 27)); --st-danger-soft: light-dark(var(--st-rosso-100), oklch(28% 0.07 27)); /* Testo SOPRA i riempimenti di stato (bottone danger, badge pieni): grafite ovunque tranne sul rosso chiaro */ --st-on-success: var(--st-neutral-1000); /* 5.9 / 8.6 */ --st-on-warning: var(--st-neutral-1000); /* 9.9 / 11.4 */ --st-on-danger: light-dark(var(--st-neutral-0), var(--st-neutral-1000)); /* 4.6 / 6.4 (grafite su rosso chiaro = 4.2, sotto AA) */ --st-info: var(--st-secondary); --st-info-soft: var(--st-secondary-soft); --st-info-fg: var(--st-secondary-soft-fg); /* Focus ring "anello" (eco dell'anello ∞ del logo) */ --st-ring: 0 0 0 2px var(--st-bg-surface), 0 0 0 4px var(--st-border-focus); } /* Tema forzato (override di prefers-color-scheme) */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* Espressione CARTA (default; la regola esplicita serve a un blocco Carta dentro un contenitore Volo) */ [data-expression="carta"] { --st-hue-neutral: 75; --st-motion-scale: 1; --st-lift: 4px; --st-tracking-tight: -0.02em; } /* Espressione VOLO: neutri freddi, chroma pieno, motion più scattante */ [data-expression="volo"] { --st-hue-neutral: 255; --st-motion-scale: 0.8; --st-lift: 6px; --st-tracking-tight: -0.03em; } /* Densità compatta (tool, dashboard, tabelle) */ [data-density="compact"] { --st-control-h-sm: 1.75rem; /* 28 */ --st-control-h-md: 2.25rem; /* 36 */ --st-control-h-lg: 2.75rem; /* 44 */ --st-control-px: var(--st-space-3); --st-gap-stack: var(--st-space-3); --st-gap-inline: var(--st-space-1); --st-card-p: var(--st-space-4); --st-table-row-h: 2.5rem; --st-leading-body: 1.5; } /* Riduzione del movimento: obbligatoria, non opzionale */ @media (prefers-reduced-motion: reduce) { :root, [data-expression] { --st-motion-scale: 0; --st-lift: 0px; } } /* Stampa: sempre chiaro, sempre Carta, niente ombre */ @media print { :root, [data-theme], [data-expression] { color-scheme: light; --st-hue-neutral: 75; --st-motion-scale: 0; } :root { --st-shadow-float: none; --st-shadow-overlay: none; } } }