/* ========================================================================== GymAI landing + onboarding — TOKENS (unico file da aggiornare) Parte A: copia VERBATIM di ui/v2/tokens.v2.css (Aurora Glass, UI Designer). Per aggiornare: sostituire tutto il blocco fra i marker A-BEGIN / A-END. Parte B: token aggiuntivi della landing NON ancora presenti nella v2 (tipografia, spazi, layout). Da riportare nella v2 se approvati. ========================================================================== */ /* ---- A-BEGIN: ui/v2/tokens.v2.css ---- */ /* GymAI v2 "Aurora Glass": design e motion token. GENERATO da ui/tools/v2-tokens.mts: non modificare a mano. Tema scuro unico (niente toggle). I colori del tenant sono calcolati da palette.ts → buildDarkTheme(brandHex): in produzione il server li inietta in per sottodominio. Qui: default GymAI + demo1/demo2 via [data-tenant]. */ :root { color-scheme: dark; /* ---- tema tenant (default GymAI #4f46e5) ---- */ --aurora-bg: #090a14; /* oklch(0.149 0.022 278.9) */ --aurora-bg-2: #151831; --aurora-glow-a: #808aff; --aurora-glow-b: #bb49df; --aurora-primary: #4f46e5; /* bianco 6.29:1 */ --aurora-primary-to: #7634d8; /* bianco 6.46:1 */ --aurora-primary-foreground: #ffffff; --aurora-brand-text: #929eff; /* 4.5:1 sul caso peggiore */ --aurora-text: #fafafa; --aurora-text-muted: #afafb9; /* 5.08:1 sul caso peggiore */ /* ---- stati (icona + testo sempre) ---- */ --status-ok: #4ade80; --status-ok-bg: rgb(74 222 128 / 0.14); --status-warn: #fcd34d; --status-warn-bg: rgb(252 211 77 / 0.14); --status-bad: #fca5a5; --status-bad-bg: rgb(248 113 113 / 0.16); --status-info: #93c5fd; --status-info-bg: rgb(96 165 250 / 0.16); --status-idle: #d4d4d8; --status-idle-bg: rgb(212 212 216 / 0.12); /* ---- vetro ---- */ --glass-fill: rgb(255 255 255 / 0.06); --glass-fill-strong: rgb(255 255 255 / 0.10); --glass-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.035)); --glass-stroke: rgb(255 255 255 / 0.12); --glass-stroke-hi: rgb(255 255 255 / 0.22); --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.10); --glass-lite: rgb(255 255 255 / 0.05); --glass-lite-stroke: rgb(255 255 255 / 0.08); --glass-lum-border: linear-gradient(135deg, rgb(255 255 255 / .55), rgb(255 255 255 / .06) 35%, transparent 55%, color-mix(in srgb, var(--aurora-glow-a) 90%, transparent)); /* ---- scrim (alpha del fondo --aurora-bg sotto il testo) ---- */ --scrim-glass: 0.62; --scrim-stickybar: 0.55; --scrim-sheet: 0.78; --scrim-toast: 0.92; --scrim-overlay: 1; --scrim-dim: 0.5; --scrim-pass-black: 0.38; --scrim-card-black: 0.22; --scrim-glass-color: color-mix(in srgb, var(--aurora-bg) 62%, transparent); --scrim-sheet-color: color-mix(in srgb, var(--aurora-bg) 78%, transparent); --scrim-toast-color: color-mix(in srgb, var(--aurora-bg) 92%, transparent); /* ---- blur (max 3 livelli visibili insieme) ---- */ --blur-1: 12px; --blur-2: 20px; --blur-3: 32px; --blur-saturate: 160%; /* ---- raggi ---- */ --radius-sm: 12px; --radius-control: 16px; --radius-md: 18px; --radius-lg: 24px; --radius-card: 26px; --radius-pass: 30px; --radius-xl: 32px; --radius-sheet: 32px; --radius-pill: 999px; /* ---- elevazione e glow ---- */ --elev-glass-1: 0 20px 40px -24px rgb(0 0 0 / 0.6); --elev-glass-2: 0 40px 120px -20px rgb(0 0 0 / 0.7); --elev-glow: 0 10px 30px -10px color-mix(in srgb, var(--aurora-glow-a) 80%, transparent); --elev-glow-strong: 0 14px 30px -8px color-mix(in srgb, var(--aurora-glow-a) 90%, transparent); --glow-a-alpha: 0.7; --glow-b-alpha: 0.6; --glow-c-alpha: 0.42; --glow-a-size: 520px; --glow-b-size: 480px; --glow-c-size: 420px; --grain-opacity: 0.07; /* ---- motion ---- */ --motion-duration-instant: 80ms; --motion-duration-fast: 140ms; --motion-duration-base: 260ms; --motion-duration-screen: 420ms; --motion-duration-slow: 480ms; --motion-duration-celebrate: 1100ms; --motion-duration-count-up: 1100ms; --motion-duration-draw: 1400ms; --motion-duration-toast: 2600ms; --motion-duration-qr-period: 10000ms; --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* approssimazione CSS della molla "indicator" */ --motion-stagger: 45ms; --motion-stagger-offset: 60ms; --motion-stagger-max-items: 8; --motion-rise: 18px; --motion-slide-x: 40px; --motion-screen-x: 22%; --motion-scale-press: 0.96; --motion-scale-press-sm: 0.9; --motion-scale-row: 0.98; --motion-scale-pop: 1.08; --motion-parallax-bg: 0.18; --motion-parallax-hero: 0.06; --motion-tilt-max: 12deg; --motion-perspective: 900px; --motion-enabled: 1; } [data-tenant="demo1"] { /* Demo Fitness · brand #ff5a1f */ --aurora-bg: #130805; /* oklch(0.150 0.022 40.0) */ --aurora-bg-2: #2e1108; --aurora-glow-a: #fe591e; --aurora-glow-b: #e13a86; --aurora-primary: #d64200; /* bianco 4.53:1 */ --aurora-primary-to: #de3148; /* bianco 4.53:1 */ --aurora-primary-foreground: #ffffff; --aurora-brand-text: #ff7e57; /* 4.57:1 sul caso peggiore */ --aurora-text: #fafafa; --aurora-text-muted: #ababb6; /* 5.04:1 sul caso peggiore */ } [data-tenant="demo2"] { /* Studio Demo 2 · brand #0f9e99 */ --aurora-bg: #050d0d; /* oklch(0.150 0.014 195.8) */ --aurora-bg-2: #051f1e; --aurora-glow-a: #00afa9; --aurora-glow-b: #1692c1; --aurora-primary: #00847f; /* bianco 4.56:1 */ --aurora-primary-to: #008391; /* bianco 4.51:1 */ --aurora-primary-foreground: #ffffff; --aurora-brand-text: #56b7b2; /* 4.56:1 sul caso peggiore */ --aurora-text: #fafafa; --aurora-text-muted: #b0b0ba; /* 5.05:1 sul caso peggiore */ } /* Movimento ridotto: durate brevi, niente spostamenti/scala, solo dissolvenze. */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration-fast: 120ms; --motion-duration-base: 120ms; --motion-duration-slow: 120ms; --motion-duration-screen: 150ms; --motion-duration-celebrate: 0ms; --motion-duration-count-up: 0ms; --motion-duration-draw: 0ms; --motion-stagger: 0ms; --motion-rise: 0px; --motion-slide-x: 0px; --motion-screen-x: 0%; --motion-scale-press: 1; --motion-scale-press-sm: 1; --motion-scale-row: 1; --motion-scale-pop: 1; --motion-parallax-bg: 0; --motion-parallax-hero: 0; --motion-tilt-max: 0deg; --motion-enabled: 0; } } /* ---- A-END ---- */ /* ---- Parte B: estensioni landing (valori presi da design-system-v2.md §4 dove esistono) ---- */ :root { --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-features: "cv11", "ss01"; /* scala tipografica (DS v2 §4: display 56–72/780 · h-xl 34/750 · h-lg 24/700 · h-md 18/650 · body 15 · small 13 · xs 12) */ --fs-display: clamp(40px, 10.5vw, 72px); --fw-display: 780; --fs-h-xl: clamp(28px, 6.4vw, 44px); --fw-h-xl: 750; --fs-h-lg: 24px; --fw-h-lg: 700; --fs-h-md: 18px; --fw-h-md: 650; --fs-body: 15px; --fs-body-lg: 17px; --fs-small: 13px; --fs-xs: 12px; --ls-tight: -0.035em; --ls-eyebrow: 0.08em; /* spazi (DS v2 §4: margini mobile 18px, gap 8/10/12/14, sezioni 26px) — sezioni landing più ampie [B] */ --space-gutter: 18px; --space-1: 8px; --space-2: 10px; --space-3: 12px; --space-4: 14px; --space-5: 20px; --space-6: 26px; --space-section: clamp(64px, 12vw, 128px); --container: 1160px; --tap-min: 44px; --control-h: 52px; /* colore neutro GymAI (brand #4f46e5, default di tokens.v2) usato come seme per l'anteprima */ --brand-seed: #4f46e5; }