/* FlowDesk design tokens — the whole theme lives here. Mirrors flowdesk/ui/theme.py in spirit: change a token, the app follows. */ :root { /* Layered dark surfaces — warm brown-black ("life OS" feel, Phase 22; the old cool slate values live on in html[data-theme="dark"]'s cousin presets). Warmth comes from these neutrals only; the accent stays cool. */ --bg: #131110; --surface: #1B1713; /* sidebar, cards */ --raised: #231E18; /* hover / raised cards */ --overlay: #2A241D; /* modals, menus */ --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); /* Text (warm off-white, ~14:1 on --bg) */ --text: #EBE6DE; --text-2: #9C948A; --text-3: #6B645B; /* One deliberate accent + semantic colors. --accent is user-customizable (Settings → Appearance sets it inline on ); hover/dim derive. */ --accent: #4C8DFF; --accent-hover: color-mix(in srgb, var(--accent) 78%, white); --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent); --success: #3DD68C; --warning: #FFB454; --danger: #FF6B6B; --ai: #A78BFA; /* Category palette (dark-tuned; project colors map onto these) */ --cat-blue: #5B9DFF; --cat-green: #3DD68C; --cat-amber: #FFB454; --cat-red: #FF6B6B; --cat-purple:#A78BFA; --cat-pink: #F472B6; --cat-teal: #2DD4BF; --cat-gray: #9CA3AF; /* Spacing scale (4-px base) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* Depth */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.30); /* Type — system stack: SF Pro on macOS, Segoe on Windows. Native, offline, zero load time; tabular numerals keep the grid steady. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif; /* --scale is user-customizable text sizing (Settings → Appearance). */ --scale: 1; --fs-title: calc(24px * var(--scale)); --fs-lg: calc(15px * var(--scale)); --fs-md: calc(13px * var(--scale)); --fs-sm: calc(12px * var(--scale)); --fs-xs: calc(11px * var(--scale)); /* Grid washes (theme-dependent) */ --off-hours: rgba(0, 0, 0, 0.25); --weekend: rgba(255, 255, 255, 0.015); /* Motion */ --t-fast: 150ms; --t-med: 240ms; --ease: cubic-bezier(0.25, 0.6, 0.3, 1); } /* Theme presets. "default" is :root above (the blue-black look). "custom" gets its variables computed and set inline by js/app.js applyAppearance(). "auto" resolves to light/dark in JS via prefers-color-scheme. */ html[data-theme="dark"] { --bg: #0C0C0D; --surface: #141416; --raised: #1C1C1F; --overlay: #232327; --weekend: rgba(255, 255, 255, 0.012); } html[data-theme="light"] { --bg: #F4F5F7; --surface: #FFFFFF; --raised: #EEF0F3; --overlay: #FFFFFF; --border: rgba(16, 24, 38, 0.08); --border-strong: rgba(16, 24, 38, 0.16); --text: #1A2027; --text-2: #5A6472; --text-3: #98A1AC; --shadow-1: 0 1px 2px rgba(16, 24, 38, 0.10); --shadow-2: 0 4px 12px rgba(16, 24, 38, 0.10), 0 12px 32px rgba(16, 24, 38, 0.08); --off-hours: rgba(16, 24, 38, 0.045); --weekend: rgba(16, 24, 38, 0.02); }