/* ============================================================================= LIZY — REDESIGN SYSTEM (production-ready) Drop this file into your Tailwind/Vanilla/whatever pipeline. Two modes: light (default) and dark (via `data-theme="dark"` on or honoured automatically through `prefers-color-scheme`). Token naming: --lz-{role}-{step?}{-state?} Roles: surface, fg, border, accent, success, warning, danger, info Steps: 0 (most subtle) → 4 (most prominent) States: -hover, -active, -muted, -on (inverse text) ============================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"); /* ---------------------------------------------------------------------------- 1 · BASE TOKENS (mode-independent) ---------------------------------------------------------------------------- */ :root { /* Brand */ --lz-brand: #2B59FF; --lz-brand-deep: #001C80; --lz-brand-soft: #EBF2FF; --lz-gradient-brand: linear-gradient(140deg, #2B59FF 0%, #001C80 100%); --lz-gradient-brand-h:linear-gradient(90deg, #2B59FF 0%, #001C80 100%); /* Type families */ --lz-font-display: "Libre Baskerville", "Caladea", Georgia, serif; --lz-font-body: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lz-font-ui: "Inter", "DM Sans", system-ui, sans-serif; --lz-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale — modular, mobile-first */ --lz-text-2xs: 10px; --lz-text-xs: 12px; --lz-text-sm: 13px; --lz-text-base: 14px; --lz-text-md: 15px; --lz-text-lg: 16px; --lz-text-xl: 18px; --lz-text-2xl: 22px; --lz-text-3xl: 28px; --lz-text-4xl: 36px; --lz-text-5xl: 48px; --lz-text-6xl: 64px; --lz-text-7xl: 88px; --lz-text-display: clamp(56px, 8vw, 128px); /* Line heights */ --lz-leading-none: 1; --lz-leading-tight: 1.12; --lz-leading-snug: 1.3; --lz-leading-normal: 1.5; --lz-leading-relaxed: 1.65; /* Letter spacing */ --lz-track-tighter: -0.025em; --lz-track-tight: -0.012em; --lz-track-normal: 0; --lz-track-wide: 0.04em; --lz-track-wider: 0.12em; /* Weights */ --lz-weight-regular: 400; --lz-weight-medium: 500; --lz-weight-semibold:600; --lz-weight-bold: 700; --lz-weight-black: 800; /* Spacing scale */ --lz-space-0: 0; --lz-space-1: 4px; --lz-space-2: 8px; --lz-space-3: 12px; --lz-space-4: 16px; --lz-space-5: 20px; --lz-space-6: 24px; --lz-space-7: 32px; --lz-space-8: 40px; --lz-space-9: 48px; --lz-space-10: 64px; --lz-space-11: 80px; --lz-space-12: 96px; --lz-space-13: 128px; /* Radius scale */ --lz-radius-xs: 4px; --lz-radius-sm: 6px; --lz-radius-md: 8px; --lz-radius-lg: 12px; --lz-radius-xl: 16px; --lz-radius-2xl: 20px; --lz-radius-3xl: 28px; --lz-radius-pill: 999px; /* Motion */ --lz-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --lz-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --lz-dur-instant: 80ms; --lz-dur-fast: 150ms; --lz-dur-base: 220ms; --lz-dur-slow: 320ms; --lz-dur-slower: 520ms; /* Layout */ --lz-sidebar-w: 280px; --lz-sidebar-w-mini: 72px; --lz-side-canvas-w: 560px; --lz-canvas-max: 1440px; --lz-readable-max: 720px; /* z-index */ --lz-z-nav: 20; --lz-z-sticky: 30; --lz-z-overlay: 100; --lz-z-modal: 200; --lz-z-toast: 300; --lz-z-cmdk: 400; } /* ---------------------------------------------------------------------------- 2 · LIGHT MODE (default) ---------------------------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; /* Surface layers */ --lz-surface-0: #F7F8FB; /* page background */ --lz-surface-1: #FFFFFF; /* card */ --lz-surface-2: #FBFCFE; /* nested card */ --lz-surface-3: #F1F4FA; /* hover */ --lz-surface-inverse: #07091F; /* dark inset */ /* Surfaces tinted with brand for context */ --lz-surface-brand: #EBF2FF; --lz-surface-brand-soft: #F5F8FF; --lz-surface-success: #E8F5E8; --lz-surface-warning: #FFF3CD; --lz-surface-danger: #FDECEC; --lz-surface-info: #E0F4F8; /* Foreground */ --lz-fg-0: #001C80; /* primary headings */ --lz-fg-1: #1A1F36; /* body strong */ --lz-fg-2: #4A4E66; /* body */ --lz-fg-3: #6B7090; /* secondary */ --lz-fg-4: #9AA0B5; /* muted */ --lz-fg-on: #FFFFFF; /* on accent / dark surface */ --lz-fg-on-muted: rgba(255,255,255,0.78); --lz-fg-brand: #2B59FF; --lz-fg-success: #1E7E34; --lz-fg-warning: #B45309; --lz-fg-danger: #B42318; --lz-fg-info: #0E7090; /* Borders */ --lz-border-0: rgba(15, 23, 64, 0.05); --lz-border-1: rgba(15, 23, 64, 0.08); --lz-border-2: rgba(15, 23, 64, 0.12); --lz-border-3: rgba(15, 23, 64, 0.22); --lz-border-brand: rgba(43, 89, 255, 0.45); /* Accent (interactive) */ --lz-accent: #2B59FF; --lz-accent-hover: #1B47E5; --lz-accent-active: #0F37C7; --lz-accent-soft: rgba(43, 89, 255, 0.10); --lz-accent-ring: rgba(43, 89, 255, 0.28); /* Semantic interactives */ --lz-success: #1E7E34; --lz-success-hover: #176B2B; --lz-warning: #D97706; --lz-warning-hover: #B45309; --lz-danger: #DC3545; --lz-danger-hover: #B42318; /* Shadows */ --lz-shadow-xs: 0 1px 2px rgba(15, 23, 64, 0.05); --lz-shadow-sm: 0 2px 6px rgba(15, 23, 64, 0.06), 0 1px 2px rgba(15, 23, 64, 0.04); --lz-shadow-md: 0 8px 24px rgba(15, 23, 64, 0.08), 0 2px 4px rgba(15, 23, 64, 0.04); --lz-shadow-lg: 0 16px 40px rgba(15, 23, 64, 0.12), 0 4px 8px rgba(15, 23, 64, 0.06); --lz-shadow-xl: 0 32px 80px rgba(15, 23, 64, 0.18), 0 8px 16px rgba(15, 23, 64, 0.08); --lz-shadow-brand: 0 12px 32px rgba(43, 89, 255, 0.28); --lz-shadow-brand-lg: 0 24px 64px rgba(43, 89, 255, 0.36); --lz-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Backgrounds with brand mesh — used on cover heroes etc */ --lz-bg-mesh: radial-gradient(1100px 600px at 18% -10%, rgba(43,89,255,0.18), transparent 60%), radial-gradient(900px 700px at 92% 30%, rgba(43,89,255,0.10), transparent 65%), var(--lz-surface-0); } /* ---------------------------------------------------------------------------- 3 · DARK MODE ---------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --lz-surface-0: #06081A; --lz-surface-1: #0E1130; --lz-surface-2: #15193E; --lz-surface-3: #1E224C; --lz-surface-inverse: #F7F8FB; --lz-surface-brand: rgba(43, 89, 255, 0.15); --lz-surface-brand-soft: rgba(43, 89, 255, 0.06); --lz-surface-success: rgba(30, 126, 52, 0.18); --lz-surface-warning: rgba(217, 119, 6, 0.18); --lz-surface-danger: rgba(220, 53, 69, 0.18); --lz-surface-info: rgba(14, 112, 144, 0.18); --lz-fg-0: #F0F2FF; --lz-fg-1: #E4E7FA; --lz-fg-2: #B3B9DB; --lz-fg-3: #8189B5; --lz-fg-4: #5B6388; --lz-fg-on: #07091F; --lz-fg-on-muted: rgba(7, 9, 31, 0.78); --lz-fg-brand: #8AA6FF; --lz-fg-success: #6FE08C; --lz-fg-warning: #FBC56B; --lz-fg-danger: #FB8A8A; --lz-fg-info: #6DD0E5; --lz-border-0: rgba(255, 255, 255, 0.04); --lz-border-1: rgba(255, 255, 255, 0.08); --lz-border-2: rgba(255, 255, 255, 0.14); --lz-border-3: rgba(255, 255, 255, 0.22); --lz-border-brand: rgba(138, 166, 255, 0.45); --lz-accent: #6E8DFF; --lz-accent-hover: #8AA6FF; --lz-accent-active: #A8BCFF; --lz-accent-soft: rgba(110, 141, 255, 0.18); --lz-accent-ring: rgba(110, 141, 255, 0.32); --lz-success: #5BBD75; --lz-success-hover: #6FE08C; --lz-warning: #E0A35A; --lz-warning-hover: #FBC56B; --lz-danger: #F47373; --lz-danger-hover: #FB8A8A; --lz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --lz-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.22); --lz-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42), 0 2px 4px rgba(0, 0, 0, 0.24); --lz-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30); --lz-shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.35); --lz-shadow-brand: 0 12px 32px rgba(110, 141, 255, 0.30); --lz-shadow-brand-lg: 0 24px 64px rgba(110, 141, 255, 0.45); --lz-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --lz-bg-mesh: radial-gradient(1100px 600px at 18% -10%, rgba(43,89,255,0.32), transparent 60%), radial-gradient(900px 700px at 92% 30%, rgba(43,89,255,0.18), transparent 65%), var(--lz-surface-0); } /* Honour OS preference when no explicit data-theme set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --lz-surface-0: #06081A; --lz-surface-1: #0E1130; --lz-surface-2: #15193E; --lz-surface-3: #1E224C; --lz-surface-inverse: #F7F8FB; --lz-surface-brand: rgba(43, 89, 255, 0.15); --lz-surface-brand-soft: rgba(43, 89, 255, 0.06); --lz-fg-0: #F0F2FF; --lz-fg-1: #E4E7FA; --lz-fg-2: #B3B9DB; --lz-fg-3: #8189B5; --lz-fg-4: #5B6388; --lz-fg-on: #07091F; --lz-fg-brand: #8AA6FF; --lz-border-0: rgba(255, 255, 255, 0.04); --lz-border-1: rgba(255, 255, 255, 0.08); --lz-border-2: rgba(255, 255, 255, 0.14); --lz-border-3: rgba(255, 255, 255, 0.22); --lz-accent: #6E8DFF; --lz-accent-hover: #8AA6FF; --lz-accent-soft: rgba(110, 141, 255, 0.18); --lz-accent-ring: rgba(110, 141, 255, 0.32); --lz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --lz-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32); --lz-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42); --lz-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50); } } /* ---------------------------------------------------------------------------- 4 · GLOBAL RESET (light-touch) ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: light dark; -webkit-text-size-adjust: 100%; tab-size: 4; } body { background: var(--lz-surface-0); color: var(--lz-fg-1); font-family: var(--lz-font-body); font-size: var(--lz-text-base); line-height: var(--lz-leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--lz-accent-soft); color: var(--lz-fg-0); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } /* Focus ring */ :focus-visible { outline: 2px solid var(--lz-accent-ring); outline-offset: 2px; border-radius: var(--lz-radius-xs); } /* Reduce motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }