/* ═══════════════════════════════════════════════════════════ BURJ LUMEN — Design Tokens Warm editorial identity · emerald primary · flat surfaces. Theming via [data-theme] on . Works in RTL & LTR. ═══════════════════════════════════════════════════════════ */ :root { /* ── Brand ── */ --brand: #047857; /* emerald — primary */ --brand-strong: #065F46; --brand-soft: #ECFDF5; --brand-ring: rgba(4, 120, 87, 0.18); --gold: #B45309; /* warm amber — hero accents only */ --gold-soft: #FEF3C7; /* ── Status ── */ --ok: #047857; --warn: #B45309; --bad: #B91C1C; --info: #1D4ED8; /* ── Canvas & surfaces (light) ── */ --canvas: #F7F7F5; /* warm paper */ --surface: #FFFFFF; --surface-2: #FBFBF9; --hairline: #ECEBE7; --hairline-strong: #DEDCD6; /* ── Ink (light) ── */ --ink: #1A1A1A; /* warm near-black */ --ink-strong: #2E2E2C; --ink-muted: #6B6B66; --ink-faint: #9C9C95; --ink-invert: #FFFFFF; /* ── Tints used on chips/sparks ── */ --tint: #F1F1ED; --tint-2: #E8E8E3; /* ── Shadows (very soft — editorial) ── */ --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04); --shadow: 0 4px 18px -10px rgba(26, 26, 26, 0.18); --shadow-lg: 0 18px 48px -22px rgba(26, 26, 26, 0.32); --shadow-brand: 0 14px 40px -16px rgba(4, 120, 87, 0.45); /* ── Geometry ── */ --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-pill: 999px; /* ── Layout ── */ --sidebar-w: 264px; --sidebar-w-collapsed: 76px; --topbar-h: 60px; --content-max: 1560px; /* ── Semantic separator aliases ── */ --line: #DEDCD6; /* table-header hard separator (= hairline-strong) */ --subtle: #ECEBE7; /* table-row soft separator (= hairline) */ /* ── Motion ── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 140ms; --t: 240ms; /* ── Type ── */ --font: 'Tajawal', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-num: 'Inter', 'Tajawal', system-ui, sans-serif; } /* ════════════════ DARK THEME ════════════════ */ :root[data-theme="dark"] { --brand: #10B981; --brand-strong: #34D399; --brand-soft: rgba(16, 185, 129, 0.12); --brand-ring: rgba(16, 185, 129, 0.25); --gold: #F59E0B; --gold-soft: rgba(245, 158, 11, 0.14); --ok: #10B981; --warn: #F59E0B; --bad: #F87171; --info: #60A5FA; --canvas: #0E0F0D; /* warm near-black */ --surface: #181916; --surface-2: #1F201C; --hairline: #2A2B27; --hairline-strong: #3A3B36; --ink: #F2F2EE; --ink-strong: #DEDED9; --ink-muted: #A0A099; --ink-faint: #6E6E68; --ink-invert: #0E0F0D; --tint: #232420; --tint-2: #2D2E29; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.6); --shadow-lg: 0 18px 48px -22px rgba(0, 0, 0, 0.7); --shadow-brand: 0 14px 40px -16px rgba(16, 185, 129, 0.4); --line: #3A3B36; --subtle: #2A2B27; }