/* ============================================================================ * Womposer Admin — design system * Palette e semantica generate col theme-generator del Builder (stessa identità * visiva: primary #2f6bff / #5b8bff, neutral hue 216, stessi radius/transizioni). * Tema: light di default, dark via (stessa logica del * Builder: localStorage 'theme' + prefers-color-scheme, vedi app/layout.ts). * ==========================================================================*/ :root { /* ----- Typography ----- */ --wa-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --wa-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace; --wa-text-xs: 11px; --wa-text-sm: 12px; --wa-text-base: 13.5px; --wa-text-md: 15px; --wa-text-lg: 17px; --wa-text-xl: 20px; --wa-text-2xl: 24px; --wa-text-hero: 30px; /* ----- Radius (dal Builder) ----- */ --wa-radius-xs: 3px; --wa-radius-sm: 6px; --wa-radius-md: 8px; --wa-radius-lg: 12px; --wa-radius-xl: 16px; --wa-radius-dialog: 18px; --wa-radius-pill: 999px; /* ----- Spacing ----- */ --wa-space-1: 4px; --wa-space-2: 8px; --wa-space-3: 12px; --wa-space-4: 16px; --wa-space-5: 20px; --wa-space-6: 24px; --wa-space-7: 32px; --wa-space-8: 40px; /* ----- Motion (dal Builder) ----- */ --wa-ease: cubic-bezier(0.2, 0, 0, 1); --wa-transition-fast: 120ms var(--wa-ease); --wa-transition-base: 180ms var(--wa-ease); --wa-transition-slow: 280ms var(--wa-ease); --wa-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ----- Controls ----- */ --wa-control-height: 34px; --wa-control-radius: var(--wa-radius-md); /* ----- Admin shell (sidebar) — ripristinata pre-paint da app/layout.ts ----- */ --wa-shell-w: 264px; /* ----- Shadows ----- */ --wa-shadow-xs: 0 1px 2px var(--wa-shadow); --wa-shadow-sm: 0 2px 6px var(--wa-shadow); --wa-shadow-md: 0 6px 16px var(--wa-shadow); --wa-shadow-lg: 0 16px 40px var(--wa-shadow-strong); color-scheme: light; /* ----- Palette LIGHT (generata dal theme-generator del Builder) ----- */ --wa-bg: #f3f4f7; --wa-canvas: #f0f2f5; --wa-canvas-muted: #e4e7ec; --wa-surface: #fcfcfd; --wa-surface-alt: #f6f7f9; --wa-surface-elevated: #ffffff; --wa-input-bg: #ffffff; --wa-control-bg: #f6f7f9; --wa-control-bg-hover: #e9ecf1; --wa-control-bg-active: #dce2ea; --wa-selected-bg: rgba(47, 107, 255, 0.12); --wa-selected-border: #96b4fe; --wa-selected-text: #0031a9; --wa-text: #181f2a; --wa-text-soft: #2c3644; --wa-muted: #69778c; --wa-muted-strong: #4b596c; --wa-placeholder: #98a1ae; --wa-border: #dce0e5; --wa-border-soft: #ebedef; --wa-border-strong: #bcc5d2; --wa-divider: #ebedef; --wa-primary: #2f6bff; --wa-on-primary: #ffffff; --wa-primary-hover: #0b52ff; --wa-primary-soft: rgba(47, 107, 255, 0.12); --wa-primary-border: #96b4fe; --wa-primary-text: #0031a9; --wa-danger: #ef4458; --wa-on-danger: #ffffff; --wa-danger-text: #a90518; --wa-danger-soft: rgba(239, 68, 88, 0.12); --wa-danger-border: #f6a0ab; --wa-success: #16a34a; --wa-success-soft: rgba(22, 163, 74, 0.12); --wa-success-text: #08682b; --wa-warning: #f59e0b; --wa-warning-soft: rgba(245, 158, 11, 0.14); --wa-warning-text: #92610a; --wa-overlay: rgba(15, 23, 42, 0.36); --wa-shadow: rgba(15, 23, 42, 0.08); --wa-shadow-strong: rgba(15, 23, 42, 0.16); --wa-tooltip-bg: #1c222c; --wa-tooltip-text: #ffffff; --wa-scrollbar-thumb: #c6cbd2; --wa-focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.26); --wa-focus-ring-strong: 0 0 0 3px rgba(47, 107, 255, 0.45); /* ----- Alias legacy (islands esistenti; da migrare progressivamente) ----- */ --bg: var(--wa-bg); --surface: var(--wa-surface); --surface-2: var(--wa-control-bg-hover); --text: var(--wa-text); --text-muted: var(--wa-muted); --border: var(--wa-border); --accent: var(--wa-primary); --accent-soft: var(--wa-primary-soft); --danger: var(--wa-danger); --danger-soft: var(--wa-danger-soft); --ok: var(--wa-success); --ok-soft: var(--wa-success-soft); --font-sans: var(--wa-font-sans); --font-mono: var(--wa-font-mono); } :root[data-theme='dark'] { color-scheme: dark; /* ----- Palette DARK (generata dal theme-generator del Builder) ----- */ --wa-bg: #111418; --wa-canvas: #0f1115; --wa-canvas-muted: #0b0c0f; --wa-surface: #181b20; --wa-surface-alt: #1f2329; --wa-surface-elevated: #262a31; --wa-input-bg: #14161a; --wa-control-bg: #1d2026; --wa-control-bg-hover: #242a32; --wa-control-bg-active: #2c343f; --wa-selected-bg: rgba(91, 139, 255, 0.2); --wa-selected-border: #364d84; --wa-selected-text: #cbdaff; --wa-text: #f0f2f5; --wa-text-soft: #d6dae0; --wa-muted: #96a1b0; --wa-muted-strong: #b9c0ca; --wa-placeholder: #6c7889; --wa-border: #2f3741; --wa-border-soft: #272d34; --wa-border-strong: #455468; --wa-divider: #272d34; --wa-primary: #5b8bff; --wa-on-primary: #ffffff; --wa-primary-hover: #7aa1ff; --wa-primary-soft: rgba(91, 139, 255, 0.16); --wa-primary-border: #364d84; --wa-primary-text: #cbdaff; --wa-danger: #f87171; --wa-on-danger: #ffffff; --wa-danger-text: #fed7d7; --wa-danger-soft: rgba(248, 113, 113, 0.16); --wa-danger-border: #7d4244; --wa-success: #34d399; --wa-success-soft: rgba(52, 211, 153, 0.16); --wa-success-text: #8cebc8; --wa-warning: #fbbf24; --wa-warning-soft: rgba(251, 191, 36, 0.18); --wa-warning-text: #fde297; --wa-overlay: rgba(0, 0, 0, 0.58); --wa-shadow: rgba(0, 0, 0, 0.42); --wa-shadow-strong: rgba(0, 0, 0, 0.6); --wa-tooltip-bg: #f4f5f6; --wa-tooltip-text: #0a0f1a; --wa-scrollbar-thumb: #3d4651; --wa-focus-ring: 0 0 0 3px rgba(91, 139, 255, 0.34); --wa-focus-ring-strong: 0 0 0 3px rgba(91, 139, 255, 0.55); } /* ============================================================================ * Base * ==========================================================================*/ * { box-sizing: border-box; } html, body { margin: 0; font-family: var(--wa-font-sans); font-size: var(--wa-text-base); background: var(--wa-bg); color: var(--wa-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { transition: background var(--wa-transition-slow), color var(--wa-transition-slow); } a { color: var(--wa-primary); } ::selection { background: var(--wa-selected-bg); color: inherit; } * { scrollbar-width: thin; scrollbar-color: var(--wa-scrollbar-thumb) transparent; } .container { max-width: 960px; margin: 0 auto; padding: 0 24px; } /* Contenuto delle pagine admin con la shell (sidebar fissa + topbar): * si sposta insieme alla sidebar (comprimibile) via --wa-shell-w. */ .wa-page { margin-left: var(--wa-shell-w); padding: 84px 28px 48px; min-height: 100vh; transition: margin-left var(--wa-transition-slow); } .wa-page-inner { max-width: 1200px; margin: 0 auto; }