/* ========================================================================== LUCIO SERVICES — Shared design tokens Single source of truth for colours, typography, radii, gradients and the signature "Cut" motif. Imported by BOTH the marketing site (style.css) and the dashboard (src/styles/dashboard.css) so the two never drift apart. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { color-scheme: dark; /* Surfaces */ --bg: #0A0A0A; --surface-1: #1C1C1E; --surface-2: #2C2C2E; --surface-3: #3A3A3C; --page-glow: radial-gradient(circle at 82% -18%, rgba(37,99,235,.22) 0, rgba(10,10,12,0) 42%); --input-bg: #101012; --panel-bg: #161619; --panel-line: #26262a; --card-grad: linear-gradient(150deg, rgba(59,130,246,.06), rgba(255,255,255,.02) 46%); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); /* Text / neutrals */ --white: #FFFFFF; --gray-1: #EBEBF0; --gray-2: #98989D; --gray-3: #636366; --text: #FFFFFF; --text-dim: #b6b6bd; --text-mut: #85858b; /* Semantic */ --success: #30D158; --warning: #FF9F0A; --danger: #FF453A; /* Accent — Lucio blue */ --accent: #3b82f6; --accent-strong: #2563eb; --accent-deep: #1e3a8a; --accent-text: #93c5fd; --accent-soft: rgba(59, 130, 246, 0.14); --accent-line: rgba(59, 130, 246, 0.38); --accent-glow: rgba(59, 130, 246, 0.35); /* Gradients */ --grad-mono: linear-gradient(135deg, #FFFFFF 0%, #98989D 100%); --grad-accent: linear-gradient(135deg, #60a5fa 0%, #3b82f6 46%, #1e40af 100%); /* Apple-like glass */ --glass-bg: rgba(28, 28, 30, 0.55); --glass-blur: blur(18px) saturate(140%); --glass-nav-bg: rgba(10, 10, 10, 0.72); /* Typography */ --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Layout */ --max-w: 1180px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --cut-angle: 12deg; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* --- Dashboard-facing aliases (legacy names kept working) --- */ --surface: var(--surface-1); --surface2: var(--surface-2); --surface3: var(--surface-3); --border: var(--border-subtle); --muted: var(--gray-2); --muted2: var(--gray-3); } /* ========================================================================== LIGHT THEME — opt-in via . Dark stays the default. Only the tokens change here; component CSS reads them. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6fa; --surface-1: #ffffff; --surface-2: #eef1f6; --surface-3: #e0e4ec; --page-glow: radial-gradient(circle at 82% -18%, rgba(37,99,235,.14) 0, rgba(244,246,250,0) 46%); --input-bg: #ffffff; --panel-bg: #f7f9fc; --panel-line: #dfe3ec; --card-grad: linear-gradient(150deg, rgba(59,130,246,.07), rgba(15,23,42,.02) 46%); --border-subtle: rgba(15, 23, 42, 0.12); --border-strong: rgba(15, 23, 42, 0.22); --white: #10131a; --gray-1: #232732; --gray-2: #565c69; --gray-3: #8b909d; --text: #10131a; --text-dim: #3f4552; --text-mut: #667085; --accent-text: #1d4ed8; --accent-soft: rgba(59, 130, 246, 0.12); --accent-line: rgba(37, 99, 235, 0.30); --accent-glow: rgba(37, 99, 235, 0.22); --grad-mono: linear-gradient(135deg, #1e293b 0%, #64748b 100%); --glass-bg: rgba(255, 255, 255, 0.72); --glass-nav-bg: rgba(255, 255, 255, 0.82); } /* ========================================================================== Ambient night sky — faint twinkling dust + occasional shooting stars. Shared by the marketing site and the dashboard (injected as behind the content). ========================================================================== */ .sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .sky::before { content: ""; position: absolute; inset: -20%; background-repeat: no-repeat; background-image: radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85), transparent), radial-gradient(1.2px 1.2px at 28% 64%, rgba(180,205,255,.8), transparent), radial-gradient(1.4px 1.4px at 46% 12%, rgba(255,255,255,.7), transparent), radial-gradient(1.1px 1.1px at 61% 78%, rgba(255,255,255,.62), transparent), radial-gradient(1.8px 1.8px at 73% 34%, rgba(190,210,255,.8), transparent), radial-gradient(1.1px 1.1px at 84% 66%, rgba(255,255,255,.6), transparent), radial-gradient(1.4px 1.4px at 91% 18%, rgba(255,255,255,.75), transparent), radial-gradient(1.1px 1.1px at 8% 84%, rgba(180,205,255,.6), transparent), radial-gradient(1px 1px at 38% 90%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 55% 46%, rgba(255,255,255,.62), transparent), radial-gradient(1px 1px at 20% 40%, rgba(255,255,255,.5), transparent), radial-gradient(1.2px 1.2px at 33% 28%, rgba(190,210,255,.6), transparent), radial-gradient(1px 1px at 67% 55%, rgba(255,255,255,.45), transparent), radial-gradient(1.3px 1.3px at 78% 82%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,.4), transparent), radial-gradient(1.1px 1.1px at 95% 45%, rgba(190,210,255,.55), transparent); animation: sky-twinkle 5.5s ease-in-out infinite alternate; } @keyframes sky-twinkle { from { opacity: .4; } to { opacity: .95; } } .sky i { position: absolute; top: var(--y, -4%); left: var(--x, 82%); width: 2px; height: 2px; border-radius: 50%; background: #eef2ff; box-shadow: 0 0 8px 1px rgba(190, 210, 255, .85); opacity: 0; transform: rotate(-11deg); animation: sky-shoot var(--dur, 9s) linear var(--delay, 0s) infinite; } .sky i::after { content: ""; position: absolute; left: 100%; top: 50%; width: 170px; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(198, 214, 255, .8), rgba(198, 214, 255, 0)); } @keyframes sky-shoot { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-11deg); } 4% { opacity: 1; } 16% { opacity: 1; } 30% { opacity: 0; transform: translate3d(-470px, 92px, 0) rotate(-11deg); } 100% { opacity: 0; transform: translate3d(-470px, 92px, 0) rotate(-11deg); } } .sky i:nth-child(1) { --x: 90%; --y: -3%; --dur: 8s; --delay: 0s; } .sky i:nth-child(2) { --x: 66%; --y: 3%; --dur: 12s; --delay: 3.5s; } .sky i:nth-child(3) { --x: 98%; --y: 14%; --dur: 9s; --delay: 6.5s; } .sky i:nth-child(4) { --x: 46%; --y: -5%; --dur: 14s; --delay: 10s; } .sky i:nth-child(5) { --x: 78%; --y: 9%; --dur: 10s; --delay: 1.8s; } :root[data-theme="light"] .sky::before { opacity: .18; } :root[data-theme="light"] .sky i { background: #64748b; box-shadow: 0 0 7px 1px rgba(100,116,139,.55); } :root[data-theme="light"] .sky i::after { background: linear-gradient(90deg, rgba(100,116,139,.5), rgba(100,116,139,0)); } @media (prefers-reduced-motion: reduce) { .sky i { display: none; } .sky::before { animation: none; opacity: .7; } }