/* ============================================================================ theme.css — Obeikan AI design tokens (single source of truth) ---------------------------------------------------------------------------- All themeable colors/fonts live here, not hardcoded in templates. Templates reference these CSS variables (var(--token)). The active theme is chosen by the data-theme attribute on ("light" | "dark"), set by the theme bootstrap in base.html from the user's saved appearance preference. To add a new theme: copy a block below and change the values under a new [data-theme=""] selector, then expose it in the Settings → Appearance picker (templates/settings.html). ============================================================================ */ /* ── Light (default) ─────────────────────────────────────────────────────── */ :root { --bg: #FAF9F5; /* warm paper canvas (one step lighter — Claude-exact) */ --bg-raised: #FFFFFF; /* raised panels */ --bg-secondary: #F0EEE6; /* list rows / secondary wells (KB doc lists) */ --surface: #FFFFFF; /* cards / bubbles / composer */ --sidebar-bg: #F5F4EE; /* light warm rail (theme-aware) */ --sidebar-text: #44413B; /* re-derived against the lighter rail */ --sidebar-strong: #1F1E1D; /* logo / active item / titles */ --sidebar-dim: #6b6862; --sidebar-faint: #9a968d; /* section labels, meta */ --sidebar-line: rgba(31, 30, 29, 0.10); --sidebar-hover: rgba(31, 30, 29, 0.05); --sidebar-active: rgba(31, 30, 29, 0.07); /* neutral fill — terracotta-tinted active retired */ --sidebar-well: rgba(31, 30, 28, 0.04); --sidebar-chip: #fbfaf7; --sidebar-accent: #c96442; --card: #ffffff; --card-border: rgba(31, 30, 28, 0.10); --border: rgba(31, 30, 28, 0.10); --input-border: rgba(31, 30, 28, 0.18); --input-focus: #c96442; --text: #1F1E1D; --muted: #6b6862; --subtle: #9a968d; --accent: #c96442; --accent-hover: #b5563a; --accent-weak: rgba(201, 100, 66, 0.10); --btn-primary-bg: #c96442; --btn-primary-hover: #b5563a; --btn-primary-text: #ffffff; --user-bubble: #EDEAE1; --success: #3f7a4e; --warning: #b5762a; --danger: #b5443a; --primary: #c96442; --primary-dark: #b5563a; /* Semantic status tokens (light) — ok / warn / danger / info bg+text pairs */ --ok-bg: #E5EFE6; --ok-text: #2E5C3A; --warn-bg: #F6ECD9; --warn-text: #7A5A1E; --danger-bg: #F6E0DC; --danger-text: #8C3A30; --info-bg: #E8E9F2; --info-text: #3E4470; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif; --font-arabic:"Noto Naskh Arabic", "Amiri", "Segoe UI", sans-serif; --sidebar-width: 288px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; } /* ── Dark ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #262624; --bg-raised: #2E2D2B; --bg-secondary: #2E2D2B; /* list rows / secondary wells (KB doc lists) */ --surface: #30302E; --sidebar-bg: #1F1E1D; --sidebar-text: rgba(255, 255, 255, 0.70); --sidebar-strong: #ffffff; --sidebar-dim: rgba(255, 255, 255, 0.60); --sidebar-faint: rgba(255, 255, 255, 0.34); --sidebar-line: rgba(255, 255, 255, 0.08); --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active: rgba(255, 255, 255, 0.09); --sidebar-well: rgba(0, 0, 0, 0.20); --sidebar-chip: rgba(255, 255, 255, 0.04); --sidebar-accent: #d97757; --card: #2b2a27; --card-border: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.10); --input-border: rgba(255, 255, 255, 0.18); --input-focus: #d97757; --text: #FAF9F5; --muted: #b3afa6; --subtle: #85817a; --accent: #d97757; --accent-hover: #e08a6c; --accent-weak: rgba(217, 119, 87, 0.16); --btn-primary-bg: #d97757; --btn-primary-hover: #e08a6c; --btn-primary-text: #ffffff; --user-bubble: #393937; --success: #5fa570; --warning: #d9a24a; --danger: #e0695f; --primary: #d97757; --primary-dark: #e08a6c; /* Semantic status tokens (dark) — translucent tints over the dark canvas */ --ok-bg: rgba(95, 165, 112, 0.18); --ok-text: #8FC79E; --warn-bg: rgba(217, 162, 74, 0.16); --warn-text: #D9B577; --danger-bg: rgba(224, 105, 95, 0.16); --danger-text: #E59B93; --info-bg: rgba(137, 146, 214, 0.18); --info-text: #AEB5E8; } /* ── Tooltips ─────────────────────────────────────────────────────────────── Elements with data-tooltip="..." get an explanatory bubble on hover / keyboard focus. The bubble is created and positioned by static/tooltip.js as a SINGLE element appended to (position: fixed), so it is NEVER clipped by an ancestor's overflow (sidebar, menus) and the positioner flips above/below and clamps within the viewport so it can't run off-screen at any resolution. Themed via CSS variables → adapts to light/dark; text-align:start → RTL-safe. data-tt="bottom" is only a *preference*; the positioner overrides it when there isn't room. */ .app-tooltip { position: fixed; z-index: 9999; width: max-content; max-width: min(280px, 90vw); background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.45; font-weight: 400; text-align: start; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20); opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; /* never intercepts clicks */ } .app-tooltip.show { opacity: 1; transform: translateY(0); } .app-tooltip .app-tooltip-arr { position: absolute; margin-left: -5px; border: 5px solid transparent; } .app-tooltip.pos-top .app-tooltip-arr { top: 100%; border-top-color: var(--border); } .app-tooltip.pos-bottom .app-tooltip-arr { bottom: 100%; border-bottom-color: var(--border); }