/* ═══════════════════════════════════════════════════════════════ FlowiLead — Design Tokens v1 (Three-Layer System) ─────────────────────────────────────────────────────────────── Layer 1 · PRIMITIVES raw values, never consumed by components Layer 2 · SEMANTIC meaning ("text-strong", "bg-canvas") Layer 3 · COMPONENT specific overrides per component Loading order: 1) tokens.css ← this file (always first) 2) components.css ← base reusable components 3) page-specific.css ← landing.css / dashboard.css Dark mode only by design. Light mode deferred until validated demand. ═══════════════════════════════════════════════════════════════ */ :root { /* ─────────────────────────────────────────────────────────── LAYER 1 · PRIMITIVES — COLOR SCALES ─────────────────────────────────────────────────────────── */ /* Neutral (warm-black scale, slight blue undertone — Linear-style) */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F4F4F5; --neutral-200: #E4E4E7; --neutral-300: #D4D4D8; --neutral-400: #A1A1AA; --neutral-500: #71717A; --neutral-600: #52525B; --neutral-700: #3F3F46; --neutral-800: #27272A; --neutral-850: #1F1F23; --neutral-900: #18181B; --neutral-925: #131316; --neutral-950: #09090B; --neutral-975: #050507; /* Mint (the "voice" hero accent) */ --mint-50: #ECFFFA; --mint-100: #C7FFEE; --mint-200: #8FFFDA; --mint-300: #4DFFC2; --mint-400: #00FFB8; --mint-500: #00E6A0; --mint-600: #00B380; --mint-700: #008060; --mint-800: #005C45; --mint-900: #003D2E; /* Indigo (secondary accent, sparingly) */ --indigo-300: #A5B4FC; --indigo-400: #818CF8; --indigo-500: #6366F1; --indigo-600: #4F46E5; --indigo-700: #4338CA; /* State scales */ --emerald-400: #34D399; --emerald-500: #10B981; --emerald-600: #059669; --amber-400: #FBBF24; --amber-500: #F59E0B; --amber-600: #D97706; --rose-400: #FB7185; --rose-500: #F43F5E; --rose-600: #E11D48; --sky-400: #38BDF8; --sky-500: #0EA5E9; /* ─────────────────────────────────────────────────────────── LAYER 1 · PRIMITIVES — SPACING (4px base) ─────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; --space-14: 160px; --space-15: 192px; /* ─────────────────────────────────────────────────────────── LAYER 1 · PRIMITIVES — TYPOGRAPHY ─────────────────────────────────────────────────────────── */ /* Font families (loaded via @import in dashboard/landing HTML) */ --font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Type scale (custom — optimized for dashboard density + landing hero) */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 80px; --text-7xl: 112px; /* Line heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing (editorial = tighter at larger sizes) */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.06em; --tracking-widest: 0.12em; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ─────────────────────────────────────────────────────────── LAYER 1 · PRIMITIVES — RADIUS ─────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-full: 9999px; /* ─────────────────────────────────────────────────────────── LAYER 1 · PRIMITIVES — SHADOWS (dark-optimized) ─────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.45); --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow-md: 0 8px 24px rgba(0,0,0,0.50); --shadow-lg: 0 16px 40px rgba(0,0,0,0.55); --shadow-xl: 0 28px 64px rgba(0,0,0,0.60); /* Inset for raised surfaces */ --inset-top: inset 0 1px 0 rgba(255,255,255,0.06); --inset-top-md: inset 0 1px 0 rgba(255,255,255,0.10); --inset-bottom: inset 0 -1px 0 rgba(0,0,0,0.30); /* Glow (accent emphasis) */ --glow-mint: 0 0 0 1px rgba(0,230,160,0.20), 0 0 32px rgba(0,230,160,0.30); --glow-mint-strong: 0 0 0 1px rgba(0,230,160,0.40), 0 0 64px rgba(0,230,160,0.55); --glow-rose: 0 0 0 1px rgba(244,63,94,0.30), 0 0 24px rgba(244,63,94,0.30); /* ─────────────────────────────────────────────────────────── LAYER 1 · PRIMITIVES — MOTION ─────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --duration-slower: 480ms; /* ─────────────────────────────────────────────────────────── LAYER 1 · PRIMITIVES — Z-INDEX ─────────────────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ═══════════════════════════════════════════════════════════ LAYER 2 · SEMANTIC TOKENS (consume these in components) ═══════════════════════════════════════════════════════════ */ /* ── Surfaces (dark) ── */ --bg-canvas: var(--neutral-975); --bg-canvas-soft: var(--neutral-950); --bg-surface: var(--neutral-925); --bg-surface-raised: var(--neutral-900); --bg-surface-hover: var(--neutral-850); --bg-input: var(--neutral-925); --bg-overlay: rgba(5, 5, 7, 0.86); --bg-glass: rgba(19, 19, 22, 0.72); /* ── Borders ── */ --border-subtle: rgba(255,255,255,0.05); --border-default: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --border-focus: var(--mint-500); --border-danger: var(--rose-500); /* ── Text ── */ --text-strong: var(--neutral-50); --text-default: var(--neutral-200); --text-muted: var(--neutral-400); --text-faint: var(--neutral-500); --text-disabled: var(--neutral-700); --text-accent: var(--mint-400); --text-on-accent: var(--neutral-975); --text-inverse: var(--neutral-950); /* ── Accent (mint = voice hero) ── */ --accent: var(--mint-500); --accent-hover: var(--mint-400); --accent-active: var(--mint-600); --accent-fg: var(--neutral-975); --accent-soft: rgba(0, 230, 160, 0.10); --accent-soft-hover: rgba(0, 230, 160, 0.16); --accent-glow: var(--glow-mint); /* ── States ── */ --state-success: var(--emerald-500); --state-success-bg: rgba(16, 185, 129, 0.12); --state-warn: var(--amber-500); --state-warn-bg: rgba(245, 158, 11, 0.12); --state-danger: var(--rose-500); --state-danger-bg: rgba(244, 63, 94, 0.12); --state-info: var(--indigo-500); --state-info-bg: rgba(99, 102, 241, 0.12); /* ── Focus ring ── */ --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--mint-500); --focus-ring-soft: 0 0 0 3px rgba(0, 230, 160, 0.35); /* ── Tipography aliases (for body copy) ── */ --type-display: var(--weight-bold) var(--text-5xl) / var(--leading-tight) var(--font-display); --type-h1: var(--weight-bold) var(--text-3xl) / var(--leading-tight) var(--font-display); --type-h2: var(--weight-semibold) var(--text-2xl) / var(--leading-snug) var(--font-display); --type-h3: var(--weight-semibold) var(--text-xl) / var(--leading-snug) var(--font-display); --type-body: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-body); --type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-body); --type-mono: var(--weight-medium) var(--text-sm) / var(--leading-normal) var(--font-mono); --type-eyebrow: var(--weight-semibold) var(--text-xs) / var(--leading-normal) var(--font-body); /* ── Layout containers ── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1440px; --container-page: 1240px; /* ── Component-specific (Layer 3 examples) ── */ --sidebar-width: 260px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; --topbar-height-sm: 48px; --button-height-sm: 28px; --button-height-md: 36px; --button-height-lg: 44px; --input-height: 38px; /* ═══════════════════════════════════════════════════════════ TOKENS v2 — DEPTH & ATMOSPHERE ───────────────────────────────────────────────────────── What makes a UI feel "alive" instead of generic: · layered surfaces (not flat dark) · ambient motion (orbs drifting, noise grain) · directional light (top-inset highlights) · mesh / conic gradients (not just linear) Use sparingly. Reserved for hero + flagship surfaces. ═══════════════════════════════════════════════════════════ */ /* ── Aurora background mesh (hero) ── */ --aurora-bg: radial-gradient(ellipse 80% 60% at 15% 0%, rgba(0, 230, 160, 0.12), transparent 60%), radial-gradient(ellipse 60% 50% at 95% 30%, rgba(99, 102, 241, 0.10), transparent 55%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0, 230, 160, 0.06), transparent 60%), var(--bg-canvas); --aurora-bg-intense: radial-gradient(ellipse 60% 50% at 20% 10%, rgba(0, 230, 160, 0.22), transparent 55%), radial-gradient(ellipse 50% 40% at 80% 20%, rgba(99, 102, 241, 0.18), transparent 55%), radial-gradient(ellipse 60% 40% at 60% 90%, rgba(0, 230, 160, 0.12), transparent 60%), var(--bg-canvas); /* ── Conic gradients (premium feel — non-generic) ── */ --conic-accent: conic-gradient(from 0deg at 50% 50%, rgba(0, 230, 160, 0.0), rgba(0, 230, 160, 0.45) 25%, rgba(99, 102, 241, 0.30) 50%, rgba(0, 230, 160, 0.0) 75%); --conic-soft: conic-gradient(from 180deg at 50% 50%, transparent, rgba(0, 230, 160, 0.10) 30%, transparent 60%); /* ── Glass tiers (3 intensities) ── */ --glass-1: rgba(19, 19, 22, 0.40); /* subtle, for inline pills */ --glass-2: rgba(19, 19, 22, 0.66); /* default cards over hero */ --glass-3: rgba(13, 13, 17, 0.82); /* modals, full panels */ --glass-blur-1: blur(8px); --glass-blur-2: blur(16px); --glass-blur-3: blur(28px); /* ── Multi-layer dimensional shadow (gives "weight") ── */ --shadow-3d: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.40), 0 32px 64px rgba(0, 0, 0, 0.30); --shadow-3d-accent: 0 1px 0 rgba(0, 230, 160, 0.18) inset, 0 0 0 1px rgba(0, 230, 160, 0.32), 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 230, 160, 0.22), 0 32px 80px rgba(0, 230, 160, 0.12); /* ── Noise texture (subtle film grain over surfaces — anti-banding) ── */ --noise-bg: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); /* ── Motion: ambient durations (longer than UI) ── */ --duration-ambient-1: 4s; --duration-ambient-2: 8s; --duration-ambient-3: 14s; --duration-ambient-4: 22s; /* ── Motion: stagger delays ── */ --stagger-1: 60ms; --stagger-2: 120ms; --stagger-3: 200ms; --stagger-4: 320ms; /* ── Section accent gradients ── */ --rail-accent: linear-gradient(180deg, transparent, var(--accent) 40%, var(--accent) 60%, transparent); --rail-soft: linear-gradient(180deg, transparent, rgba(0, 230, 160, 0.30), transparent); /* ── Hero number sizing (editorial) ── */ --num-display-xl: 200px; --num-display-lg: 144px; --num-display-md: 96px; } /* ═══════════════════════════════════════════════════════════════ AMBIENT KEYFRAMES (consumed by .fl-aurora, .fl-pulse, .fl-waveform) ═══════════════════════════════════════════════════════════════ */ @keyframes fl-aurora-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(-3%, 2%, 0) scale(1.05); } 66% { transform: translate3d(2%, -1%, 0) scale(0.98); } } @keyframes fl-pulse-ring { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes fl-wave-bar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } @keyframes fl-live-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 160, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(0, 230, 160, 0); } } @keyframes fl-count-up { from { transform: translateY(0.5em); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fl-shimmer-x { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes fl-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════ GLOBAL BASE — applied to / via tokens ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; background: var(--bg-canvas); text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font: var(--type-body); color: var(--text-default); background: var(--bg-canvas); letter-spacing: var(--tracking-normal); } ::selection { background: var(--accent-soft-hover); color: var(--text-strong); } /* Custom scrollbar (subtle, dark) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg-canvas); } ::-webkit-scrollbar-thumb { background: var(--neutral-800); border: 3px solid var(--bg-canvas); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--neutral-700); } /* Focus visible (only keyboard navigation) */ :focus { outline: none; } :focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }