/* Atrium · Shared Design Tokens * * Single source of truth for colors, spacing, typography. * Imported by all Core-shipped frontends (login, chat, settings). * * :root → Light-Theme (Default) * html.dark → Dark-Theme Override (set by shared/shell.js applyMode()) */ :root { /* Backgrounds — paper hierarchy (lightest to darkest) */ --paper: #fafafa; --paper-2: #f4f4f5; --paper-3: #e4e4e7; --card: #ffffff; --card-2: #f9fafb; /* Alias for legacy var names */ --bg: #fafafa; --bg-elev: #ffffff; --bg-hover: #f4f4f5; --panel: #ffffff; --surface: #ffffff; --soft: #f4f4f5; /* Text — ink hierarchy (darkest to lightest) */ --ink: #0a0a0a; --ink-2: #171717; --ink-3: #525252; --ink-4: #a3a3a3; --text: #0a0a0a; --text-muted: #525252; --muted: #525252; --fg: #0a0a0a; --fg-muted: #525252; /* Borders / Hairlines */ --hair: #e5e5e5; --hair-2: #f0f0f0; --border: #e5e5e5; /* Accent (green — Atrium signature color) */ --accent: #16a34a; --accent-2: #15803d; --accent-strong: #15803d; --accent-soft: #dcfce7; --accent-bg: #dcfce7; --accent-tint: rgba(22, 163, 74, 0.14); --accent-ring: rgba(22, 163, 74, 0.18); --accent-on: #ffffff; /* Status — ok / warn / risk / ai */ --ok: #15803d; --ok-tint: #dcfce7; --warn: #a16207; --warn-tint: #fef3c7; --risk: #b91c1c; --risk-tint: #fee2e2; --ai: #1e293b; --ai-tint: #f1f5f9; /* Legacy danger/success aliases */ --danger: #b91c1c; --danger-soft: #fee2e2; --success: #15803d; /* Role badges (unified hues on light bg) */ --badge-read: #525252; --badge-write: #15803d; --badge-admin: #a16207; --badge-supervisor: #b91c1c; /* Radii */ --r-sm: 6px; --r: 10px; --r-lg: 14px; /* Shadows — soft, paper-like */ --shadow-sm: 0 1px 0 rgba(20, 30, 48, 0.04); --shadow: 0 1px 2px rgba(20, 30, 48, 0.06), 0 6px 16px -8px rgba(20, 30, 48, 0.12); --shadow-lg: 0 4px 10px rgba(20, 30, 48, 0.08), 0 24px 40px -16px rgba(20, 30, 48, 0.18); /* Typography */ --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Aliases used by inline-style code in some HTML pages. The chat empty-state cards, search-input etc. reference these names directly (e.g. ``background: var(--surface-1, #fff)``). Without the alias the fallback ``#fff`` wins in dark-mode, breaking the visual. Light-mode values mirror the canonical tokens above. */ --surface-1: var(--surface); --surface-2: var(--bg-hover); --surface-3: #d1d5db; --text-primary: var(--fg); --text-secondary: var(--fg-muted); color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════ * Dark Theme — activated by . shell.js applyMode() * reads localStorage("atrium_theme") (or prefers-color-scheme as * initial default) and toggles the class on documentElement. * ═════════════════════════════════════════════════════════════════════ */ html.dark { /* Backgrounds */ --paper: #0a0a0a; --paper-2: #171717; --paper-3: #262626; --card: #141414; --card-2: #1f1f1f; --bg: #0a0a0a; --bg-elev: #141414; --bg-hover: #1f1f1f; --panel: #141414; --surface: #141414; --soft: #1f1f1f; /* Text */ --ink: #fafafa; --ink-2: #e4e4e7; --ink-3: #a3a3a3; --ink-4: #737373; --text: #fafafa; --text-muted: #a3a3a3; --muted: #a3a3a3; --fg: #fafafa; --fg-muted: #a3a3a3; /* Borders */ --hair: #262626; --hair-2: #1f1f1f; --border: #262626; /* Accent — slightly brighter green for dark backgrounds */ --accent: #10b981; --accent-2: #34d399; --accent-strong: #34d399; --accent-soft: #052e1f; --accent-bg: #052e1f; --accent-tint: rgba(16, 185, 129, 0.18); --accent-ring: rgba(16, 185, 129, 0.28); --accent-on: #052e1f; /* Status */ --ok: #10b981; --ok-tint: #052e1f; --warn: #f59e0b; --warn-tint: #2d1e05; --risk: #f87171; --risk-tint: #2d0b0b; --ai: #cbd5e1; --ai-tint: #1e293b; --danger: #f87171; --danger-soft: #2d0b0b; --success: #10b981; /* Role badges — softer hues on dark bg */ --badge-read: #a3a3a3; --badge-write: #34d399; --badge-admin: #fbbf24; --badge-supervisor: #f87171; /* Shadows — heavier on dark to keep card depth visible */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow: 0 2px 6px rgba(0, 0, 0, 0.50), 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 24px 40px -16px rgba(0, 0, 0, 0.55); /* Dark-mode overrides for the inline-style aliases (see light-mode block for rationale). Values mirror the canonical dark tokens above so a card declared ``background: var(--surface-1, #fff)`` gets the dark surface, not the white fallback. */ --surface-1: var(--surface); --surface-2: var(--bg-hover); --surface-3: #3f3f46; --text-primary: var(--fg); --text-secondary: var(--fg-muted); color-scheme: dark; }