/* ═══════════════════════════════════════════════════════════════════════ GAIBRA — Theme Tokens ───────────────────────────────────────────────────────────────────── Apply via: Themes define accent only. Mode defines the base palette. The two are orthogonal — any combination is valid. ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════════════════ BASE — Dark mode (default) ═══════════════════════════════════════════════════════════════════════ */ html[data-gaibra-theme], html:not([data-gaibra-mode]) { /* Backgrounds */ --bg: #09090B; --bg-alt: #0F0F12; --bg-surface: #16161A; --bg-hover: #1C1C21; --bg-accent-soft: transparent; /* per-theme */ /* Text — high contrast */ --fg: #FFFFFF; --fg-dim: #CDCDD6; --fg-faint: #8A8A9A; /* Borders */ --border: #1E1E24; --border-strong: #2A2A32; /* Fonts */ --font-hd: 'Tajawal', 'IBM Plex Sans Arabic', -apple-system, sans-serif; --font-body: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace; /* Composer */ --composer-bg: transparent; --composer-input-bg: #16161A; --composer-input-border: #2A2A32; --composer-radius: 16px; --composer-gradient: linear-gradient(180deg, transparent 0%, rgba(9,9,11,0.85) 40%, rgba(9,9,11,1) 100%); --composer-shadow: 0 4px 24px rgba(0,0,0,0.4); /* Messages */ --msg-user-bg: #111116; --msg-ai-bg: transparent; /* Sidebar */ --sidebar-bg: #0C0C0F; --sidebar-active: #16161A; } /* ═══════════════════════════════════════════════════════════════════════ LIGHT mode overrides ═══════════════════════════════════════════════════════════════════════ */ html[data-gaibra-mode="light"] { --bg: #FFFFFF; --bg-alt: #F7F7F9; --bg-surface: #EFEFF2; --bg-hover: #E8E8EC; --fg: #000000; --fg-dim: #3D3D4A; --fg-faint: #7A7A8C; --border: #E0E0E5; --border-strong: #CCCCDA; --composer-input-bg: #FFFFFF; --composer-input-border: #CCCCDA; --composer-gradient: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,1) 100%); --composer-shadow: 0 4px 24px rgba(0,0,0,0.08); --msg-user-bg: #F0F0F4; --sidebar-bg: #F3F3F6; --sidebar-active: #E8E8ED; } /* ═══════════════════════════════════════════════════════════════════════ THEME 1 · SOVEREIGN — Blue ═══════════════════════════════════════════════════════════════════════ */ html[data-gaibra-theme="sovereign"], html:not([data-gaibra-theme]) { --accent: #3B82F6; --accent-fg: #FFFFFF; --accent-soft: rgba(59, 130, 246, 0.10); --accent-border: rgba(59, 130, 246, 0.20); --bg-accent-soft: rgba(59, 130, 246, 0.06); --send-radius: 50%; } /* ═══════════════════════════════════════════════════════════════════════ THEME 2 · OBSIDIAN — Gold (square send button) ═══════════════════════════════════════════════════════════════════════ */ html[data-gaibra-theme="obsidian"] { --accent: #C8A868; --accent-fg: #000000; --accent-soft: rgba(200, 168, 104, 0.10); --accent-border: rgba(200, 168, 104, 0.20); --bg-accent-soft: rgba(200, 168, 104, 0.06); --send-radius: 8px; } /* ═══════════════════════════════════════════════════════════════════════ THEME 3 · SILVER — Neutral platinum ═══════════════════════════════════════════════════════════════════════ */ html[data-gaibra-theme="silver"] { --accent: #C0C4CC; --accent-fg: #000000; --accent-soft: rgba(192, 196, 204, 0.12); --accent-border: rgba(192, 196, 204, 0.25); --bg-accent-soft: rgba(192, 196, 204, 0.08); --send-radius: 50%; } /* ═══════════════════════════════════════════════════════════════════════ THEME 4 · FIRE — Red-orange ignition ═══════════════════════════════════════════════════════════════════════ */ html[data-gaibra-theme="fire"] { --accent: #FF3D1F; --accent-fg: #FFFFFF; --accent-soft: rgba(255, 61, 31, 0.10); --accent-border: rgba(255, 61, 31, 0.22); --bg-accent-soft: rgba(255, 61, 31, 0.06); --send-radius: 50%; } /* ═══════════════════════════════════════════════════════════════════════ THEME 5 · VIOLET — Deep royal ═══════════════════════════════════════════════════════════════════════ */ html[data-gaibra-theme="violet"] { --accent: #5B21B6; --accent-fg: #FFFFFF; --accent-soft: rgba(91, 33, 182, 0.14); --accent-border: rgba(91, 33, 182, 0.28); --bg-accent-soft: rgba(91, 33, 182, 0.08); --send-radius: 50%; }