/* ════════════════════════════════════════════════════════════ Life OS — Design Token System ──────────────────────────────────────────────────────────── Source of truth for all surface-level styling. See web/DESIGN.md for design principles. Two CSS axes on : data-theme ∈ {atlas-sage, almanac-terracotta} data-theme-mode ∈ {light, dark} Each page hardcodes both attributes per the surface-default table in DESIGN.md §1. A pre-paint script reads localStorage keys (lifeos.theme, lifeos.theme-mode) and overrides the attributes before the stylesheet paints. When adding a new palette, follow the existing pattern: define surfaces, borders, text, accent, semantics, and shadows for both light and dark modes. ════════════════════════════════════════════════════════════ */ /* Web fonts are loaded via in each HTML head (with preconnect hints) instead of @import here, so the browser can parallelize the font CSS fetch with this stylesheet's parse. The canonical URL lives in DESIGN.md and below for reference: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap */ /* ────────────────────────────────────────────────────────── UNIVERSAL TOKENS — same across palettes ────────────────────────────────────────────────────────── */ :root { /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Radii */ --radius: 6px; --radius-card: 10px; --radius-pill: 999px; /* Z-stack */ --z-scrim: 40; --z-sidebar: 50; --z-overlay: 60; --z-modal: 100; /* Font stacks — palettes pick one each */ --serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif; --sans-geist: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sans-plex: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono-geist: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --mono-plex: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ════════════════════════════════════════════════════════════ PALETTE — atlas-sage ──────────────────────────────────────────────────────────── Flow surfaces (chat, collections, sessions, ...). Geist typography. Sage accent. Dark-first by design — light mode uses an independently-tuned sage that doesn't read olive. ════════════════════════════════════════════════════════════ */ :root[data-theme="atlas-sage"] { --sans: var(--sans-geist); --mono: var(--mono-geist); } /* ──── atlas-sage · DARK ──── */ :root[data-theme="atlas-sage"][data-theme-mode="dark"] { /* Surfaces — 5 layered slate shades */ --bg: #0c0f10; --bg-elevated: #131718; --surface: #171b1d; --surface-2: #1c2123; --hover: #21272a; /* Borders — whisper-thin */ --border: #1f2426; --border-soft: #181c1e; --border-hover: #2c3236; /* Text — bone-on-slate, 4 levels */ --text: #e6e9e6; --text-soft: #b6bdb8; --text-muted: #757c78; --text-faint: #4a5151; /* Accent — sage */ --accent: #94b58a; --accent-deep: #7a9c70; --accent-soft: rgba(148, 181, 138, 0.12); --accent-line: rgba(148, 181, 138, 0.28); --accent-glow: rgba(148, 181, 138, 0.18); --on-accent: #0c0f10; /* Semantics — semantic-only colors (no decoration) */ --ok: #7da979; --ok-soft: rgba(125, 169, 121, 0.12); --warn: #d6a55c; --warn-soft: rgba(214, 165, 92, 0.12); --info: #6f9bc0; --info-soft: rgba(111, 155, 192, 0.12); --danger: #d97070; --danger-soft: rgba(217, 112, 112, 0.12); /* Chat: user-message tint (distinct from agent's sage) */ --user-tint: #6f9bc0; --user-soft: rgba(111, 155, 192, 0.10); --user-line: rgba(111, 155, 192, 0.30); /* Shadows — dark mode needs more alpha */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.50); color-scheme: dark; } /* ──── atlas-sage · LIGHT ──── Light-mode accent is independently designed: dark sage doesn't survive a white bg (reads olive/military). Tuned to sit correctly against #f7f8f6 with AA-grade contrast. */ :root[data-theme="atlas-sage"][data-theme-mode="light"] { --bg: #f7f8f6; --bg-elevated: #f1f3ef; --surface: #ffffff; --surface-2: #fafbf9; --hover: #eef0ec; --border: #e3e6e0; --border-soft: #ecefe9; --border-hover: #ccd1c9; --text: #1a1d1a; --text-soft: #3e4540; --text-muted: #767d77; --text-faint: #a3a8a3; /* Sage redesigned for light mode — cooler, more forest, less olive */ --accent: #486f59; --accent-deep: #3a5a47; --accent-soft: rgba(72, 111, 89, 0.08); --accent-line: rgba(72, 111, 89, 0.24); --accent-glow: rgba(72, 111, 89, 0.12); --on-accent: #ffffff; --ok: #3d6b4f; --ok-soft: rgba(61, 107, 79, 0.10); --warn: #a07028; --warn-soft: rgba(160, 112, 40, 0.12); --info: #3d6a8c; --info-soft: rgba(61, 106, 140, 0.10); --danger: #a8332f; --danger-soft: rgba(168, 51, 47, 0.10); --user-tint: #3d6a8c; --user-soft: rgba(61, 106, 140, 0.08); --user-line: rgba(61, 106, 140, 0.24); --shadow-sm: 0 1px 2px rgba(20, 30, 20, 0.04); --shadow-md: 0 4px 16px rgba(20, 30, 20, 0.06), 0 1px 2px rgba(20, 30, 20, 0.04); --shadow-lg: 0 12px 28px rgba(20, 30, 20, 0.08); color-scheme: light; } /* ════════════════════════════════════════════════════════════ PALETTE — almanac-terracotta ──────────────────────────────────────────────────────────── Destination surfaces (dashboard, notes, birthdays, memory, graph). Fraunces serif display + IBM Plex body + IBM Plex Mono data. Terracotta accent. Light-first by design — dark mode uses warm dark with brighter terracotta. ════════════════════════════════════════════════════════════ */ :root[data-theme="almanac-terracotta"] { --sans: var(--sans-plex); --mono: var(--mono-plex); } /* ──── almanac-terracotta · LIGHT ──── */ :root[data-theme="almanac-terracotta"][data-theme-mode="light"] { /* Surfaces — parchment cream layers */ --bg: #faf7f1; --bg-elevated: #f4efe6; --surface: #ffffff; --surface-2: #f8f3ea; --hover: #eee8da; /* Borders */ --border: #ece4d4; --border-soft: #f0eadd; --border-hover: #d9cdb6; /* Text — ink on parchment */ --text: #1f1a14; --text-soft: #4a4138; --text-muted: #8a7e6f; --text-faint: #b8ad9c; /* Accent — terracotta */ --accent: #b85a3a; --accent-deep: #8c4128; --accent-soft: rgba(184, 90, 58, 0.10); --accent-line: rgba(184, 90, 58, 0.22); --accent-glow: rgba(184, 90, 58, 0.16); --on-accent: #fff8f1; /* Semantics — muted, never loud */ --ok: #5d7a4a; --ok-soft: rgba(93, 122, 74, 0.10); --warn: #b08538; --warn-soft: rgba(176, 133, 56, 0.12); --info: #4a6e9b; --info-soft: rgba(74, 110, 155, 0.10); --danger: #a8332f; --danger-soft: rgba(168, 51, 47, 0.10); /* User chat tint */ --user-tint: #4a6e9b; --user-soft: rgba(74, 110, 155, 0.08); --user-line: rgba(74, 110, 155, 0.22); --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.04); --shadow-md: 0 4px 16px rgba(60, 40, 20, 0.06), 0 1px 2px rgba(60, 40, 20, 0.04); --shadow-lg: 0 12px 28px rgba(60, 40, 20, 0.08); color-scheme: light; } /* ──── almanac-terracotta · DARK ──── */ :root[data-theme="almanac-terracotta"][data-theme-mode="dark"] { --bg: #18130d; --bg-elevated: #1f1a13; --surface: #221c14; --surface-2: #2a2218; --hover: #322818; --border: #2e271c; --border-soft: #251e15; --border-hover: #4a3f2c; --text: #f1ead9; --text-soft: #c9bfa9; --text-muted: #847c6b; --text-faint: #524a3d; /* Brighter terracotta for dark — pure #b85a3a is too muddy */ --accent: #d77a5a; --accent-deep: #b85a3a; --accent-soft: rgba(215, 122, 90, 0.14); --accent-line: rgba(215, 122, 90, 0.28); --accent-glow: rgba(215, 122, 90, 0.22); --on-accent: #18130d; --ok: #8aa672; --ok-soft: rgba(138, 166, 114, 0.12); --warn: #d4a455; --warn-soft: rgba(212, 164, 85, 0.14); --info: #7d9ec4; --info-soft: rgba(125, 158, 196, 0.12); --danger: #d97070; --danger-soft: rgba(217, 112, 112, 0.12); --user-tint: #7d9ec4; --user-soft: rgba(125, 158, 196, 0.10); --user-line: rgba(125, 158, 196, 0.28); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* ════════════════════════════════════════════════════════════ FALLBACK — when no palette set ──────────────────────────────────────────────────────────── Defensive defaults so any page that forgets data-theme still renders sensibly (atlas-sage dark — chat-priority palette). ════════════════════════════════════════════════════════════ */ :root:not([data-theme]) { --sans: var(--sans-geist); --mono: var(--mono-geist); --bg: #0c0f10; --bg-elevated: #131718; --surface: #171b1d; --surface-2: #1c2123; --hover: #21272a; --border: #1f2426; --border-soft: #181c1e; --border-hover: #2c3236; --text: #e6e9e6; --text-soft: #b6bdb8; --text-muted: #757c78; --text-faint: #4a5151; --accent: #94b58a; --accent-deep: #7a9c70; --accent-soft: rgba(148, 181, 138, 0.12); --accent-line: rgba(148, 181, 138, 0.28); --accent-glow: rgba(148, 181, 138, 0.18); --on-accent: #0c0f10; --ok: #7da979; --ok-soft: rgba(125, 169, 121, 0.12); --warn: #d6a55c; --warn-soft: rgba(214, 165, 92, 0.12); --info: #6f9bc0; --info-soft: rgba(111, 155, 192, 0.12); --danger: #d97070; --danger-soft: rgba(217, 112, 112, 0.12); --user-tint: #6f9bc0; --user-soft: rgba(111, 155, 192, 0.10); --user-line: rgba(111, 155, 192, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.40); color-scheme: dark; } /* ════════════════════════════════════════════════════════════ GLOBAL — body, scrollbars, motion ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.55; letter-spacing: -0.011em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 220ms var(--ease), color 220ms var(--ease); } /* Slightly tighter body for atlas (Geist), slightly relaxed for almanac (Plex Sans) */ :root[data-theme="atlas-sage"] body { letter-spacing: -0.011em; } :root[data-theme="almanac-terracotta"] body { letter-spacing: -0.005em; line-height: 1.55; } ::selection { background: var(--accent-soft); color: var(--text); } /* Scrollbars — minimal, theme-aware */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* Focus visible */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } /* Reduced motion respected globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ════════════════════════════════════════════════════════════ ACCENT VARIANTS — independent axis from register. ──────────────────────────────────────────────────────────── Setting data-accent on :root overrides the accent tokens from the active palette. Lets you keep Atlas's slate-+-Geist register but swap sage for indigo, amber, rose, plum. Each accent ships with hand-tuned dark + light tones. These rules are declared AFTER the palette rules so they win the cascade (same specificity, later wins). ════════════════════════════════════════════════════════════ */ /* ──── sage (Atlas default) ──── */ :root[data-accent="sage"][data-theme-mode="dark"] { --accent: #94b58a; --accent-deep: #7a9c70; --accent-soft: rgba(148, 181, 138, 0.12); --accent-line: rgba(148, 181, 138, 0.28); --accent-glow: rgba(148, 181, 138, 0.18); --on-accent: #0c0f10; } :root[data-accent="sage"][data-theme-mode="light"] { --accent: #486f59; --accent-deep: #3a5a47; --accent-soft: rgba(72, 111, 89, 0.08); --accent-line: rgba(72, 111, 89, 0.24); --accent-glow: rgba(72, 111, 89, 0.12); --on-accent: #ffffff; } /* ──── indigo — calm, more "OS" ──── */ :root[data-accent="indigo"][data-theme-mode="dark"] { --accent: #8087c9; --accent-deep: #6068a8; --accent-soft: rgba(128, 135, 201, 0.12); --accent-line: rgba(128, 135, 201, 0.28); --accent-glow: rgba(128, 135, 201, 0.20); --on-accent: #0c0f10; } :root[data-accent="indigo"][data-theme-mode="light"] { --accent: #5a64a8; --accent-deep: #444d8a; --accent-soft: rgba(90, 100, 168, 0.08); --accent-line: rgba(90, 100, 168, 0.24); --accent-glow: rgba(90, 100, 168, 0.12); --on-accent: #ffffff; } /* ──── amber — warm without parchment ──── */ :root[data-accent="amber"][data-theme-mode="dark"] { --accent: #d6a55c; --accent-deep: #b88840; --accent-soft: rgba(214, 165, 92, 0.12); --accent-line: rgba(214, 165, 92, 0.28); --accent-glow: rgba(214, 165, 92, 0.20); --on-accent: #1a1410; } :root[data-accent="amber"][data-theme-mode="light"] { --accent: #a07028; --accent-deep: #835a1f; --accent-soft: rgba(160, 112, 40, 0.10); --accent-line: rgba(160, 112, 40, 0.26); --accent-glow: rgba(160, 112, 40, 0.14); --on-accent: #ffffff; } /* ──── rose — soft, human, not pink ──── */ :root[data-accent="rose"][data-theme-mode="dark"] { --accent: #d68a96; --accent-deep: #b86c78; --accent-soft: rgba(214, 138, 150, 0.12); --accent-line: rgba(214, 138, 150, 0.28); --accent-glow: rgba(214, 138, 150, 0.20); --on-accent: #18100f; } :root[data-accent="rose"][data-theme-mode="light"] { --accent: #a8525e; --accent-deep: #8a3f4a; --accent-soft: rgba(168, 82, 94, 0.08); --accent-line: rgba(168, 82, 94, 0.24); --accent-glow: rgba(168, 82, 94, 0.14); --on-accent: #ffffff; } /* ──── plum — quiet, contemplative ──── */ :root[data-accent="plum"][data-theme-mode="dark"] { --accent: #b08ad0; --accent-deep: #906db0; --accent-soft: rgba(176, 138, 208, 0.12); --accent-line: rgba(176, 138, 208, 0.28); --accent-glow: rgba(176, 138, 208, 0.20); --on-accent: #100c14; } :root[data-accent="plum"][data-theme-mode="light"] { --accent: #6e4a8a; --accent-deep: #553770; --accent-soft: rgba(110, 74, 138, 0.08); --accent-line: rgba(110, 74, 138, 0.24); --accent-glow: rgba(110, 74, 138, 0.14); --on-accent: #ffffff; } /* ──── terracotta (Almanac default) ──── */ :root[data-accent="terracotta"][data-theme-mode="dark"] { --accent: #d77a5a; --accent-deep: #b85a3a; --accent-soft: rgba(215, 122, 90, 0.14); --accent-line: rgba(215, 122, 90, 0.28); --accent-glow: rgba(215, 122, 90, 0.22); --on-accent: #18130d; } :root[data-accent="terracotta"][data-theme-mode="light"] { --accent: #b85a3a; --accent-deep: #8c4128; --accent-soft: rgba(184, 90, 58, 0.10); --accent-line: rgba(184, 90, 58, 0.22); --accent-glow: rgba(184, 90, 58, 0.16); --on-accent: #fff8f1; } /* ──── ochre — deeper, golden Almanac alt ──── */ :root[data-accent="ochre"][data-theme-mode="dark"] { --accent: #d6a14a; --accent-deep: #b88438; --accent-soft: rgba(214, 161, 74, 0.12); --accent-line: rgba(214, 161, 74, 0.28); --accent-glow: rgba(214, 161, 74, 0.20); --on-accent: #1a1408; } :root[data-accent="ochre"][data-theme-mode="light"] { --accent: #946420; --accent-deep: #7a4f15; --accent-soft: rgba(148, 100, 32, 0.08); --accent-line: rgba(148, 100, 32, 0.24); --accent-glow: rgba(148, 100, 32, 0.14); --on-accent: #ffffff; } /* ════════════════════════════════════════════════════════════ LEGACY ALIASES (transitional — remove after M5) ──────────────────────────────────────────────────────────── Several pages have inline styles using the previous token names (--bg-primary, --border-color, --green, etc). These aliases let those pages render correctly until M5 reskins them to consume the canonical tokens directly. ════════════════════════════════════════════════════════════ */ :root { --bg-primary: var(--bg); --bg-secondary: var(--bg-elevated); --bg-tertiary: var(--hover); --text-primary: var(--text); --text-secondary: var(--text-muted); --border-color: var(--border); --green: var(--ok); --yellow: var(--warn); --red: var(--danger); } /* ════════════════════════════════════════════════════════════ SKELETON LOADERS ──────────────────────────────────────────────────────────── Hairline-tinted placeholder shapes shown while async data arrives (>200ms perceivable threshold). Each page composes `.skeleton-line`, `.skeleton-row`, `.skeleton-stat`, etc. into structures that approximate the final layout, so the eye stays anchored when real content lands. Pulse animation is subtle on purpose — alternates opacity between 0.55 and 1.0 so there's life without distraction. The reduced-motion block below disables it. ════════════════════════════════════════════════════════════ */ @keyframes skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .skeleton { display: block; background: var(--surface-2); border-radius: 4px; animation: skeleton-pulse 1.4s ease-in-out infinite; position: relative; overflow: hidden; } .skeleton-line { height: 12px; width: 100%; margin: 6px 0; } .skeleton-line.short { width: 38%; } .skeleton-line.medium { width: 64%; } .skeleton-line.long { width: 86%; } .skeleton-title { height: 22px; width: 50%; margin: 0 0 8px; background: var(--surface-2); border-radius: 4px; animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-stat { display: flex; flex-direction: column; gap: 8px; padding: 0 20px; border-right: 1px solid var(--border-soft); } .skeleton-stat:first-child { padding-left: 0; } .skeleton-stat:last-child { border-right: none; padding-right: 0; } .skeleton-stat .skeleton-figure { height: 38px; width: 60%; background: var(--surface-2); border-radius: 4px; animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-stat .skeleton-label { height: 10px; width: 70%; background: var(--surface-2); border-radius: 4px; animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-stat .skeleton-hint { height: 10px; width: 50%; background: var(--surface-2); border-radius: 4px; animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-row { display: flex; align-items: center; gap: 18px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); } .skeleton-row > .skeleton { border-radius: 4px; } .skeleton-block { height: 60px; border-radius: var(--radius); background: var(--surface-2); animation: skeleton-pulse 1.4s ease-in-out infinite; margin-bottom: 10px; } /* ════════════════════════════════════════════════════════════ REDUCED MOTION ──────────────────────────────────────────────────────────── Honor OS-level "reduce motion" preference. Collapses every animation and transition (rise keyframes, hover fills, drawer slide-ins, three-dot thinking indicator, sidebar collapse, etc.) down to negligible durations so the user sees the final state immediately without any in-flight motion. ════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } }