/** * TrendWriter Gateway — CSS Variables المركزية * ═══════════════════════════════════════════════ * القاعدة الذهبية: * كل متغير CSS يُعرَّف هنا فقط — مرة واحدة. * لا تُعرِّف :root في أي ملف آخر. * لتغيير لون أو قيمة — عدّل هنا فقط وتتغير كل الصفحات. * * الاستخدام: * أضف هذا السطر في قبل أي CSS آخر: * */ /* ── الألوان الأساسية ─────────────────────────────────────── */ :root { /* الخلفيات */ --bg: #020617; --bg-2: #060d1e; --bg-3: #0d1528; --surface: #0b1426; --surface-2: #111c33; --sidebar: #0f172a; /* الزجاجية (Glassmorphism) */ --glass: rgba(255, 255, 255, 0.035); --glass-hover: rgba(255, 255, 255, 0.06); /* الحدود */ --border: rgba(148, 163, 184, 0.10); --border-strong: rgba(148, 163, 184, 0.18); --border-hover: rgba(255, 255, 255, 0.14); /* النصوص */ --text: #e2e8f0; --text-dim: #94a3b8; --text-mute: #64748b; /* اللون الرئيسي — أخضر TrendWriter */ --accent: #10b981; --accent-soft: rgba(16, 185, 129, 0.12); --accent-glow: rgba(16, 185, 129, 0.35); --accent-dim: rgba(16, 185, 129, 0.25); /* اللون الثانوي — بنفسجي Agent */ --agent: #6c63ff; --agent-soft: rgba(108, 99, 255, 0.14); --purple: #8b5cf6; --purple-soft: rgba(139, 92, 246, 0.12); --purple-glow: rgba(139, 92, 246, 0.25); /* التحذيرات والأخطاء */ --red: #ef4444; --red-soft: rgba(239, 68, 68, 0.12); --amber: #f59e0b; --amber-soft: rgba(245, 158, 11, 0.12); --blue: #3b82f6; --blue-soft: rgba(59, 130, 246, 0.12); /* الكود */ --code-bg: #0a1224; --user-bubble: #1e293b; /* الخطوط */ --font-main: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --font-arabic: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; --font-mono: 'Fira Code', 'Courier New', ui-monospace, monospace; /* الحواف */ --radius: 14px; --radius-sm: 8px; --radius-xs: 6px; /* الظلال */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.12); /* التحريكات */ --transition: 0.15s ease; --transition-md: 0.25s ease; } /* ── Reset أساسي ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } :lang(ar), [lang="ar"] { font-family: var(--font-arabic); } button { font-family: inherit; cursor: pointer; } /* ── مساعدات Glassmorphism ──────────────────────────────── */ .glass { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .glass:hover { border-color: var(--border-hover); } /* ── شبكة الخلفية المحيطة (Ambient Grid) ─────────────────── */ .ambient-grid::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(16, 185, 129, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.025) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; z-index: 0; }