/* ============================================================= WizBI Design Tokens — v2.0 Single source of truth for tools.wizbi.ai and agent.wizbi.ai ✏️ Edit THIS FILE to update design across both products. ⚠️ Tokens only — no element styles in this file. ℹ️ To add a theme: create wizbi-theme-.css with [data-theme=""] { /* override tokens here */ } ============================================================= */ /* ── Dark theme (default) ───────────────────────────────────── */ :root { /* ── Backgrounds ─────────────────────────────────────── */ --bg-base: #050505; --bg-primary: #0a0a0a; --bg-secondary: #0e0e0e; --bg-panel: rgba(10,10,10,0.60); /* ── Surfaces ────────────────────────────────────────── */ --surface-1: #111111; --surface-2: #1a1a1a; --surface-3: #222222; /* ── Glass & Borders ─────────────────────────────────── */ --glass: rgba(255,255,255,0.03); --glass-hover: rgba(255,255,255,0.06); --glass-border: rgba(255,255,255,0.07); /* color value */ --glass-border-rule: 1px solid var(--glass-border); /* full border shorthand */ --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.14); --border-active: rgba(255,255,255,0.12); --surface-border: rgba(255,255,255,0.07); /* = --border */ --surface-border-hover: rgba(255,255,255,0.14); /* = --border-strong */ /* ── Brand ───────────────────────────────────────────── */ --accent: #6366f1; --accent-2: #a855f7; --accent-3: #c084fc; --accent-hover: #4f46e5; --accent-dim: #4f46e5; --accent-glow: rgba(99,102,241,0.22); /* ── Gradients ───────────────────────────────────────── */ --gradient: linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%); --gradient-accent: linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%); --gradient-subtle: linear-gradient(135deg,rgba(99,102,241,0.12),rgba(168,85,247,0.06)); /* ── Semantic ────────────────────────────────────────── */ --success: #10b981; --success-bg: rgba(16,185,129,0.10); --success-border: rgba(16,185,129,0.25); --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.10); --danger: #ef4444; --danger-bg: rgba(239,68,68,0.10); --danger-border: rgba(239,68,68,0.25); --info: #3b82f6; /* ── Text ────────────────────────────────────────────── */ --text: #f8fafc; --text-2: #a1a1aa; --text-3: #52525b; /* ── Typography ──────────────────────────────────────── */ --font: 'Heebo','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-mono: ui-monospace,'SFMono-Regular','Menlo','Monaco','Consolas',monospace; /* ── Form elements ───────────────────────────────────── */ --input-bg: rgba(255,255,255,0.05); --input-border: rgba(255,255,255,0.10); /* ── Radius ──────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* ── Shadows ─────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 8px 32px rgba(0,0,0,0.55); --shadow-lg: 0 20px 60px rgba(0,0,0,0.70); --shadow-glow: 0 0 24px var(--accent-glow); /* ── Motion ──────────────────────────────────────────── */ --ease: cubic-bezier(0.22,1,0.36,1); --spring: cubic-bezier(0.34,1.56,0.64,1); --t-fast: 150ms; --t-norm: 300ms; --t-slow: 400ms; /* ── Layout ──────────────────────────────────────────── */ --header-h: 56px; --mob-nav-h: 56px; --nav-h: 56px; --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* ── Component tokens (dark default) ─────────────────── */ --bg-panel-solid: rgba(18,18,18,0.95); --btn-subtle-bg: rgba(255,255,255,0.05); --btn-subtle-hover: rgba(255,255,255,0.10); --tab-bar-bg: rgba(0,0,0,0.40); --chat-bg: transparent; --msg-user-bg: rgba(99,102,241,0.15); --msg-assistant-bg: rgba(255,255,255,0.03); /* ── Cross-repo compatibility aliases ─────────────────── */ /* These map legacy or app-specific names → canonical tokens */ /* Do not remove — both repos rely on these names */ --text-1: var(--text); --text-primary: var(--text); --text-secondary: var(--text-2); --text-muted: var(--text-2); --accent-1: var(--accent); --accent-primary: var(--accent); --accent-gradient: var(--gradient); --accent-gradient-subtle: var(--gradient-subtle); --primary-color: var(--accent); --error: var(--danger); --surface-border-alias: var(--border); /* intentionally named to avoid conflict */ --bg-glass: var(--glass); --bg-glass-hover: var(--glass-hover); --border-light: var(--border); --font-sans: var(--font); --font-hebrew: var(--font); --font-latin: var(--font); --fast: var(--t-fast); --normal: var(--t-norm); --header-height: var(--header-h); --tab-bar-height: var(--mob-nav-h); --ease-out: var(--ease); --ease-spring: var(--spring); } /* ── English / LTR font override ────────────────────────────── */ :root[lang="en"], [dir="ltr"] { --font: 'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; } /* ── Light theme ─────────────────────────────────────────────── */ [data-theme="light"] { --bg-base: #f5f5f7; --bg-primary: #fafafa; --bg-secondary: #ffffff; --bg-panel: rgba(255,255,255,0.85); --surface-1: #ffffff; --surface-2: #f4f4f5; --surface-3: #e4e4e7; --glass: rgba(255,255,255,0.75); --glass-hover: rgba(255,255,255,0.92); --glass-border: rgba(0,0,0,0.07); --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.16); --border-active: rgba(0,0,0,0.12); --surface-border: #e4e4e7; --surface-border-hover: #d4d4d8; --accent-glow: rgba(99,102,241,0.12); --success-bg: rgba(16,185,129,0.08); --text: #09090b; --text-2: #52525b; --text-3: #a1a1aa; --input-bg: rgba(0,0,0,0.04); --input-border: rgba(0,0,0,0.08); --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 8px 32px rgba(0,0,0,0.10); --shadow-lg: 0 20px 60px rgba(0,0,0,0.15); --bg-panel-solid: rgba(255,255,255,0.95); --btn-subtle-bg: rgba(0,0,0,0.04); --btn-subtle-hover: rgba(0,0,0,0.08); --tab-bar-bg: rgba(0,0,0,0.03); --chat-bg: #fafafa; --msg-user-bg: rgba(99,102,241,0.08); --msg-assistant-bg: rgba(0,0,0,0.02); }