/* ============================================================ CMD + J — Design tokens (dark-first) Native-macOS feel · violet accent · indigo→magenta AI gradient ============================================================ */ :root { /* ---- type ---- */ --font-sans: -apple-system, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace; --text-xs: 11px; --lh-xs: 15px; --text-sm: 13px; --lh-sm: 18px; --text-base: 15px; --lh-base: 22px; --text-md: 17px; --lh-md: 24px; --text-lg: 21px; --lh-lg: 28px; --text-xl: 28px; --lh-xl: 34px; --text-2xl: 34px; --lh-2xl: 40px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ---- spacing (4pt base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; /* ---- radii ---- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-hud: 18px; --r-pill: 999px; /* ---- accent (violet–indigo) ---- */ --accent: #8b5cf6; --accent-hover: #7c3aed; --accent-press: #6d28d9; --accent-soft: rgba(139,92,246,0.16); --accent-softer: rgba(139,92,246,0.10); --accent-ring: rgba(139,92,246,0.45); --accent-text: #c4b5fd; /* ---- AI / writing gradient (reserved for the hero moment) ---- */ --ai-grad: linear-gradient(100deg, #6d5cf5 0%, #a855f7 48%, #d6409f 100%); --ai-grad-soft: linear-gradient(100deg, rgba(109,92,245,0.20), rgba(214,64,159,0.20)); --ai-1: #6d5cf5; --ai-2: #a855f7; --ai-3: #d6409f; /* ---- dark surfaces ---- */ --bg-desktop: #0a0a0e; /* behind everything */ --bg-window: #16161c; /* opaque app windows (settings) */ --bg-elev: #1d1d25; /* raised rows/cards */ --bg-elev-2: #25252f; --bg-input: rgba(255,255,255,0.05); --bg-input-strong: rgba(255,255,255,0.08); /* HUD vibrancy (translucent, sits over content) */ --hud-fill: rgba(24,24,30,0.72); --hud-fill-top: rgba(40,40,52,0.66); --hud-blur: 30px; /* ---- hairlines / borders ---- */ --line-1: rgba(255,255,255,0.07); /* subtle divider */ --line-2: rgba(255,255,255,0.10); /* card border */ --line-3: rgba(255,255,255,0.16); /* stronger / hover */ --line-strong: rgba(255,255,255,0.22); /* ---- text ---- */ --fg-1: #ECECF1; /* primary */ --fg-2: #C2C2CB; /* secondary — brightened for readability */ --fg-3: #ADADB7; /* tertiary / hints — brightened for readability */ --fg-4: #97979F; /* faint — brightened for readability */ --fg-on-accent: #ffffff; /* ---- status ---- */ --ok: #34d399; --ok-bg: rgba(52,211,153,0.14); --warn: #fbbf24; --warn-bg: rgba(251,191,36,0.14); --err: #f87171; --err-bg: rgba(248,113,113,0.14); --info: #60a5fa; --info-bg: rgba(96,165,250,0.14); /* ---- shadows ---- */ --shadow-hud: 0 24px 70px -12px rgba(0,0,0,0.66), 0 8px 24px -8px rgba(0,0,0,0.5); --shadow-pop: 0 12px 32px -8px rgba(0,0,0,0.55); --shadow-window: 0 40px 100px -20px rgba(0,0,0,0.7); --glow-ai: 0 0 0 1px rgba(168,85,247,0.35), 0 6px 30px -6px rgba(168,85,247,0.45); /* ---- motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-summon: 150ms; --dur-fast: 120ms; --dur-base: 200ms; } /* ============================================================ LIGHT THEME — set [data-theme="light"] on ============================================================ */ [data-theme="light"] { --accent: #7c3aed; --accent-hover: #6d28d9; --accent-press: #5b21b6; --accent-soft: rgba(124,58,237,0.12); --accent-softer: rgba(124,58,237,0.07); --accent-ring: rgba(124,58,237,0.40); --accent-text: #6d28d9; --bg-desktop: #e7e9f2; --bg-window: #ffffff; --bg-elev: #f6f6f8; --bg-elev-2: #ececef; --bg-input: rgba(0,0,0,0.045); --bg-input-strong: rgba(0,0,0,0.07); --hud-fill: rgba(250,250,252,0.80); --hud-fill-top: rgba(255,255,255,0.86); --line-1: rgba(0,0,0,0.07); --line-2: rgba(0,0,0,0.11); --line-3: rgba(0,0,0,0.16); --line-strong: rgba(0,0,0,0.24); --fg-1: #1d1d1f; --fg-2: #4b4b53; --fg-3: #6e6e77; --fg-4: #838388; --ok-bg: rgba(16,160,110,0.13); --warn-bg: rgba(176,120,20,0.15); --err-bg: rgba(200,50,50,0.11); --info-bg: rgba(40,110,210,0.12); --shadow-hud: 0 24px 64px -14px rgba(20,20,40,0.22), 0 6px 18px -8px rgba(20,20,40,0.12); --shadow-pop: 0 12px 30px -10px rgba(20,20,40,0.18); --shadow-window: 0 40px 90px -24px rgba(20,20,40,0.22); }