/* ============================================================ FLYWALL — Design tokens Pulled directly from the app's design system (02-flywall-ux-spec.md). Dark-first, with a warm light alternate. Toggle via [data-theme] on . ============================================================ */ /* ---- DARK (primary site theme) ---- */ :root, [data-theme="dark"] { /* Backgrounds */ --bg-canvas: #0d0b14; /* deep near-black plum — the "desk" */ --bg-surface: #16121e; /* cards, panels */ --bg-surface-hover: #1e1828; --bg-subtle: #1a1520; --bg-elevated: #201a2a; /* Text */ --text-primary: #e8e0ed; --text-secondary: #9e8fa8; --text-tertiary: #6b5a73; --text-inverse: #0d0b14; /* Accents (shared, tuned per theme) */ --accent-primary: #FFB38E; /* PEACH — the signature color */ --accent-hover: #FFC4A8; --accent-muted: #2a1f2e; /* soft peach-on-dark fill */ --brand-terracotta: #C0633D; /* logo burnt-orange / wordmark */ --brand-purple: #701974; /* deep magenta-purple — ambient glow */ --accent-info: #38BDF8; --accent-success: #22C55E; --accent-danger: #EF4444; /* Borders */ --border-default: #2a2235; --border-subtle: #1e1828; --border-focus: #FFB38E; /* Shadows */ --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.4); --shadow-elevated: 0 20px 40px -8px rgba(0, 0, 0, 0.6); --shadow-toolbar: 0 8px 32px rgba(0, 0, 0, 0.4); /* Glass */ --glass-bg: rgba(22, 18, 30, 0.62); --glass-bg-strong: rgba(13, 11, 20, 0.78); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Canvas */ --canvas-grid-dot: rgba(150, 122, 160, 0.16); /* Knowledge-graph node colours (peach / green / terracotta family — no blue/violet) */ --node-meeting: #3fae73; /* green */ --node-note: #FFB38E; /* peach */ --node-doc: #C0633D; /* terracotta */ --node-theme: #b9907a; /* warm taupe (tags / themes) */ /* Orb opacities */ --orb-peach: 0.30; --orb-purple: 0.42; color-scheme: dark; } /* ---- LIGHT (warm alternate) ---- */ [data-theme="light"] { --bg-canvas: #FCFBF9; /* warm off-white */ --bg-surface: #FFFFFF; --bg-surface-hover: #F8F7F5; --bg-subtle: #F1ECE6; --bg-elevated: #FFFFFF; --text-primary: #1A1320; --text-secondary: #5C5165; --text-tertiary: #968AA0; --text-inverse: #FFFFFF; --accent-primary: #FF9A6B; /* slightly deeper peach for contrast on white */ --accent-hover: #F4854F; --accent-muted: #FFF1E9; --brand-terracotta: #C0633D; --brand-purple: #701974; --accent-info: #0EA5E9; --accent-success: #16A34A; --accent-danger: #EF4444; --border-default: #ECE6E0; --border-subtle: #F4F0EB; --border-focus: #FF9A6B; --shadow-card: 0 10px 25px -8px rgba(70, 40, 30, 0.10); --shadow-elevated: 0 24px 50px -12px rgba(70, 40, 30, 0.16); --shadow-toolbar: 0 8px 32px rgba(70, 40, 30, 0.12); --glass-bg: rgba(255, 255, 255, 0.66); --glass-bg-strong: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.7); --glass-shadow: 0 8px 32px rgba(70, 40, 30, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); --canvas-grid-dot: rgba(160, 140, 120, 0.22); --node-meeting: #2E8B57; /* green */ --node-note: #E89A6E; /* peach (deeper for white bg) */ --node-doc: #C0633D; /* terracotta */ --node-theme: #A9805F; /* warm taupe */ --orb-peach: 0.34; --orb-purple: 0.16; color-scheme: light; } /* ---- Non-color tokens (shared) ---- */ :root { --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, Consolas, monospace; /* Radii */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Motion */ --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 120ms var(--ease-smooth); --t-normal: 200ms var(--ease-smooth); --t-smooth: 320ms var(--ease-smooth); --t-spring: 420ms var(--ease-spring); /* Layout */ --maxw: 1200px; --maxw-narrow: 880px; --nav-h: 64px; } /* ============================================================ Reset ======== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg-canvas); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background 480ms var(--ease-smooth), color 480ms var(--ease-smooth); } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: 4px; } /* ============================================================ Glass ======== */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .glass-strong { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(32px) saturate(1.6); backdrop-filter: blur(32px) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass, .glass-strong { background: var(--bg-surface); } } /* mono helper */ .mono { font-family: var(--font-mono); font-variant-ligatures: none; }