/* =========================================== Role-Based Color System 10 themeable base colors + color-mix() derived tones Brand palette (default) — user-facing name → role variable: Brand → --c-primary #C8C8D8 Action → --c-secondary #0073E6 Positive → --c-success #1DC071 Danger → --c-danger #DF1B41 Warning → --c-warning #F7AB0A AI → --c-special #7C5CFC Mid → --c-muted #606060 Subtext → --c-neutral #909090 (dark) / #606060 (light) Text → --c-fg #EDEDED (dark) / #0F0F12 (light) Background → --c-bg #0F0F12 (dark) / #EDEDED (light) (--c-info kept as-is per task brief) =========================================== */ :root { /* === 10 Themeable Base Colors — Brand (light mode baseline) === */ --c-primary: #C8C8D8; /* Brand */ --c-secondary: #0073E6; /* Action */ --c-success: #1DC071; /* Positive */ --c-danger: #DF1B41; /* Danger */ --c-info: #ab44d5; /* unchanged */ --c-warning: #F7AB0A; /* Warning */ --c-special: #7C5CFC; /* AI */ --c-neutral: #606060; /* Subtext (light) */ --c-muted: #606060; /* Mid */ --c-bg: #EDEDED; /* light-mode Background = brand Text inverted */ --c-fg: #0F0F12; /* light-mode Text = brand Background inverted */ /* === Contrast Text (on colored backgrounds) === */ --c-text-on-dark: #fff; /* white text on dark-colored bg (badges, danger/success/info buttons) */ --c-text-on-bright: #000; /* black text on bright bg (primary/yellow buttons, memes badge) */ /* === Fixed Platform Colors === */ --platform-telegram: #0088cc; --platform-discord: #5865F2; /* === 5 Tones per Role (base + 4 derived) === -soft: light tint (badge bg, subtle bg) -bold: darker (hover, borders) -dim: very dark (text on soft bg) -ghost: transparent (overlays, glows) */ /* primary */ --c-primary-soft: color-mix(in srgb, var(--c-primary), var(--c-bg) 85%); --c-primary-bold: color-mix(in srgb, var(--c-primary), var(--c-fg) 30%); --c-primary-dim: color-mix(in srgb, var(--c-primary), var(--c-fg) 60%); --c-primary-ghost: color-mix(in srgb, var(--c-primary), transparent 88%); /* secondary */ --c-secondary-soft: color-mix(in srgb, var(--c-secondary), var(--c-bg) 85%); --c-secondary-bold: color-mix(in srgb, var(--c-secondary), var(--c-fg) 30%); --c-secondary-dim: color-mix(in srgb, var(--c-secondary), var(--c-fg) 60%); --c-secondary-ghost: color-mix(in srgb, var(--c-secondary), transparent 88%); /* success */ --c-success-soft: color-mix(in srgb, var(--c-success), var(--c-bg) 85%); --c-success-bold: color-mix(in srgb, var(--c-success), var(--c-fg) 30%); --c-success-dim: color-mix(in srgb, var(--c-success), var(--c-fg) 60%); --c-success-ghost: color-mix(in srgb, var(--c-success), transparent 88%); /* danger */ --c-danger-soft: color-mix(in srgb, var(--c-danger), var(--c-bg) 85%); --c-danger-bold: color-mix(in srgb, var(--c-danger), var(--c-fg) 30%); --c-danger-dim: color-mix(in srgb, var(--c-danger), var(--c-fg) 60%); --c-danger-ghost: color-mix(in srgb, var(--c-danger), transparent 88%); /* info */ --c-info-soft: color-mix(in srgb, var(--c-info), var(--c-bg) 85%); --c-info-bold: color-mix(in srgb, var(--c-info), var(--c-fg) 30%); --c-info-dim: color-mix(in srgb, var(--c-info), var(--c-fg) 60%); --c-info-ghost: color-mix(in srgb, var(--c-info), transparent 88%); /* warning */ --c-warning-soft: color-mix(in srgb, var(--c-warning), var(--c-bg) 85%); --c-warning-bold: color-mix(in srgb, var(--c-warning), var(--c-fg) 30%); --c-warning-dim: color-mix(in srgb, var(--c-warning), var(--c-fg) 60%); --c-warning-ghost: color-mix(in srgb, var(--c-warning), transparent 88%); /* special */ --c-special-soft: color-mix(in srgb, var(--c-special), var(--c-bg) 85%); --c-special-bold: color-mix(in srgb, var(--c-special), var(--c-fg) 30%); --c-special-dim: color-mix(in srgb, var(--c-special), var(--c-fg) 60%); --c-special-ghost: color-mix(in srgb, var(--c-special), transparent 88%); /* neutral */ --c-neutral-soft: color-mix(in srgb, var(--c-neutral), var(--c-bg) 85%); --c-neutral-bold: color-mix(in srgb, var(--c-neutral), var(--c-fg) 30%); --c-neutral-dim: color-mix(in srgb, var(--c-neutral), var(--c-fg) 60%); --c-neutral-ghost: color-mix(in srgb, var(--c-neutral), transparent 88%); /* muted (charts/badges/data-viz) */ --c-muted-soft: color-mix(in srgb, var(--c-muted), var(--c-bg) 85%); --c-muted-bold: color-mix(in srgb, var(--c-muted), var(--c-fg) 30%); --c-muted-dim: color-mix(in srgb, var(--c-muted), var(--c-fg) 60%); --c-muted-ghost: color-mix(in srgb, var(--c-muted), transparent 88%); /* === Structural: Text === */ --text-primary: color-mix(in srgb, var(--c-neutral), var(--c-fg) 50%); --text-body: color-mix(in srgb, var(--c-neutral), var(--c-fg) 33%); --text-secondary: color-mix(in srgb, var(--c-neutral), var(--c-fg) 45%); --text-highlighted: color-mix(in srgb, var(--c-primary), var(--c-fg) 50%); --text-muted: color-mix(in srgb, var(--c-neutral), var(--c-bg) 33%); --text-faint: color-mix(in srgb, var(--c-neutral), var(--c-bg) 56%); /* === Structural: Surfaces === */ --surface: color-mix(in srgb, var(--c-neutral), var(--c-bg) 96%); --surface-alt: color-mix(in srgb, var(--c-neutral), var(--c-bg) 94%); --surface-hover: color-mix(in srgb, var(--c-neutral), var(--c-bg) 90%); --surface-progress: color-mix(in srgb, var(--c-neutral), var(--c-bg) 85%); --input-bg: color-mix(in srgb, var(--c-neutral), var(--c-bg) 97%); /* === Structural: Borders === */ --border: color-mix(in srgb, var(--c-neutral), var(--c-bg) 80%); --border-light: color-mix(in srgb, var(--c-neutral), var(--c-bg) 90%); --border-subtle: color-mix(in srgb, var(--c-neutral), var(--c-bg) 82%); /* === Shadows (black-based, light mode opacity) === */ --shadow-sm: 0 2px 8px color-mix(in srgb, black, transparent 94%); --shadow-md: 0 4px 16px color-mix(in srgb, black, transparent 92%); --shadow-lg: 0 8px 24px color-mix(in srgb, black, transparent 88%); --shadow-knob: 0 2px 4px color-mix(in srgb, black, transparent 85%); --shadow-widget: 0 4px 20px color-mix(in srgb, black, transparent 85%); --shadow-card-hover: 0 2px 8px color-mix(in srgb, black, transparent 90%); --shadow-toggle-btn: 0 2px 6px color-mix(in srgb, black, transparent 90%); --shadow-popover: 0 4px 12px color-mix(in srgb, black, transparent 85%); /* === Overlay === */ --overlay-bg: color-mix(in srgb, black, transparent 50%); /* === Focus & Animation === */ --focus-ring-primary: 0 0 0 3px var(--c-secondary-ghost); --focus-ring-toggle: 0 0 0 2px var(--c-secondary-ghost); --breathing-shadow-on: 0 0 0 0 color-mix(in srgb, var(--c-success), transparent 60%); --breathing-shadow-off: 0 0 0 4px color-mix(in srgb, var(--c-success), transparent 100%); --save-pulse-on: 0 0 0 0 color-mix(in srgb, var(--c-primary), transparent 60%); --save-pulse-off: 0 0 0 8px color-mix(in srgb, var(--c-primary), transparent 100%); /* === Layout === */ --sidebar-width: 240px; /* === Typography === Geist (self-hosted) first, then the modern system stack, then emoji families so reaction emoji render in color across OSes. */ --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* === Radius scale === */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* === Motion === */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-micro: 80ms; --dur-fast: 150ms; --dur-base: 220ms; } /* =========================================== Dark Mode — override base colors + shadows All tones/structural vars auto-adjust via color-mix() =========================================== */ :root[data-theme="dark"] { --c-bg: #0F0F12; /* Background */ --c-fg: #EDEDED; /* Text */ --c-neutral: #909090; /* Subtext */ --c-muted: #606060; /* Mid */ /* Shadows — higher opacity for dark backgrounds */ --shadow-sm: 0 2px 8px color-mix(in srgb, black, transparent 80%); --shadow-md: 0 4px 16px color-mix(in srgb, black, transparent 75%); --shadow-lg: 0 8px 24px color-mix(in srgb, black, transparent 65%); --shadow-knob: 0 2px 4px color-mix(in srgb, black, transparent 70%); --shadow-widget: 0 4px 20px color-mix(in srgb, black, transparent 60%); --shadow-card-hover: 0 2px 8px color-mix(in srgb, black, transparent 75%); --shadow-toggle-btn: 0 2px 6px color-mix(in srgb, black, transparent 75%); --shadow-popover: 0 4px 12px color-mix(in srgb, black, transparent 60%); }