/* ===================================================================== LexOman AI — Design Tokens نظام الرموز المرئية: 6 لوحات لونية × (فاتح + داكن) الاستخدام: ضع data-theme على للونية، و class="dark" للوضع الداكن. مثال: ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); /* ---------- المحايدات: الوضع الفاتح (الأساس) ---------- */ :root { --font-sans: 'Tajawal', system-ui, sans-serif; --bg: #F6F7F9; --surface: #FFFFFF; --surface-2: #F1F2F4; --text: #1A1A1A; --text-muted: #374151; /* رمادي داكن قوي — مقروء في الوضع الفاتح */ --text-subtle: #6B7280; /* أُغمِق قليلاً ليبقى التدرّج متناسقاً */ --border: rgba(0,0,0,0.10); --border-strong: rgba(0,0,0,0.18); --on-brand: #FFFFFF; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --success-bg: #EAF3DE; --success-text: #27500A; --warning-bg: #FAEEDA; --warning-text: #854F0B; --danger-bg: #FCEBEB; --danger-text: #791F1F; --info-bg: #EBF4FF; --info-text: #1D4ED8; --brand: #2563EB; --brand-weak: rgba(37,99,235,0.12); /* الشريط الجانبي — خلفية اللون الكاملة مع نصوص بيضاء */ --sidebar-bg: var(--brand); --sidebar-border: rgba(0,0,0,0.12); --sidebar-text: #ffffff; --sidebar-text-muted: #ffffff; --sidebar-active-bg: #ffffff; --sidebar-active-text: var(--brand); --sidebar-hover-bg: rgba(255,255,255,0.10); } /* ---------- لوحات اللونية: الوضع الفاتح ---------- */ [data-theme="default"] { --brand:#374151; --brand-weak:rgba(55,65,81,0.12); --sidebar-bg: var(--surface); --sidebar-border: var(--border-strong); --sidebar-text: var(--text); --sidebar-text-muted: var(--text-muted); --sidebar-active-bg: var(--brand); --sidebar-active-text: var(--on-brand); --sidebar-hover-bg: var(--surface-2); } [data-theme="blue"] { --brand:#1D4ED8; --brand-weak:rgba(29,78,216,0.12); } [data-theme="navy"] { --brand:#1E3A8A; --brand-weak:rgba(30,58,138,0.12); } [data-theme="teal"] { --brand:#0F766E; --brand-weak:rgba(15,118,110,0.12); } [data-theme="emerald"] { --brand:#047857; --brand-weak:rgba(4,120,87,0.12); } [data-theme="wine"] { --brand:#9F1239; --brand-weak:rgba(159,18,57,0.12); } [data-theme="purple"] { --brand:#6D28D9; --brand-weak:rgba(109,40,217,0.12); } [data-theme="gold"] { --brand:#B8860B; --brand-weak:rgba(184,134,11,0.12); } [data-theme="amber"] { --brand:#B45309; --brand-weak:rgba(180,83,9,0.12); } [data-theme="indigo"] { --brand:#4338CA; --brand-weak:rgba(67,56,202,0.12); } [data-theme="rose"] { --brand:#BE123C; --brand-weak:rgba(190,18,60,0.12); } [data-theme="slate"] { --brand:#334155; --brand-weak:rgba(51,65,85,0.12); } [data-theme="pink"] { --brand:#DB2777; --brand-weak:rgba(219,39,119,0.12); } [data-theme="sky"] { --brand:#0284C7; --brand-weak:rgba(2,132,199,0.12); } [data-theme="orange"] { --brand:#EA580C; --brand-weak:rgba(234,88,12,0.12); } [data-theme="brown"] { --brand:#92400E; --brand-weak:rgba(146,64,14,0.12); } /* ---------- المحايدات: الوضع الداكن ---------- */ .dark { --bg: #16181C; --surface: #1F2228; --surface-2: #25282F; --text: #ECECEC; --text-muted: #9AA0A8; --text-subtle: #6B7280; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --on-brand: #16181C; --success-bg: rgba(99,153,34,0.18); --success-text: #C0DD97; --warning-bg: rgba(186,117,23,0.20); --warning-text: #FAC775; --danger-bg: rgba(226,75,74,0.18); --danger-text: #F09595; --info-bg: rgba(37,99,235,0.18); --info-text: #93C5FD; --brand: #60A5FA; --brand-weak: rgba(96,165,250,0.20); /* الشريط الجانبي — الوضع الداكن: شريط داكن مشبّع بلون الهوية الفاتح */ --sidebar-bg: color-mix(in srgb, var(--brand) 22%, #0C0E13); --sidebar-border: rgba(255,255,255,0.07); --sidebar-text: #ffffff; --sidebar-text-muted: #ffffff; --sidebar-active-bg: #ffffff; --sidebar-active-text: var(--brand); --sidebar-hover-bg: rgba(255,255,255,0.08); } /* ---------- لوحات اللونية: الوضع الداكن (ألوان أفتح للتباين) ---------- */ .dark[data-theme="default"] { --brand:#9CA3AF; --brand-weak:rgba(156,163,175,0.20); --sidebar-bg: var(--surface); --sidebar-border: var(--border-strong); --sidebar-text: var(--text); --sidebar-text-muted: var(--text-muted); --sidebar-active-bg: var(--brand); --sidebar-active-text: var(--on-brand); --sidebar-hover-bg: var(--surface-2); } .dark[data-theme="blue"] { --brand:#60A5FA; --brand-weak:rgba(96,165,250,0.20); } .dark[data-theme="navy"] { --brand:#93C5FD; --brand-weak:rgba(147,197,253,0.20); } .dark[data-theme="teal"] { --brand:#44788e; --brand-weak:rgba(45,212,191,0.20); } .dark[data-theme="emerald"] { --brand:#34a078; --brand-weak:rgba(52,211,153,0.20); } .dark[data-theme="wine"] { --brand:#FB7185; --brand-weak:rgba(251,113,133,0.20); } .dark[data-theme="purple"] { --brand:#A78BFA; --brand-weak:rgba(167,139,250,0.20); } .dark[data-theme="gold"] { --brand:#FBBF24; --brand-weak:rgba(251,191,36,0.20); } .dark[data-theme="amber"] { --brand:#FDE68A; --brand-weak:rgba(253,230,138,0.20); } .dark[data-theme="indigo"] { --brand:#818CF8; --brand-weak:rgba(129,140,248,0.20); } .dark[data-theme="rose"] { --brand:#FDA4AF; --brand-weak:rgba(253,164,175,0.20); } .dark[data-theme="slate"] { --brand:#94A3B8; --brand-weak:rgba(148,163,184,0.20); } .dark[data-theme="pink"] { --brand:#F472B6; --brand-weak:rgba(244,114,182,0.20); } .dark[data-theme="sky"] { --brand:#38BDF8; --brand-weak:rgba(56,189,248,0.20); } .dark[data-theme="orange"] { --brand:#FB923C; --brand-weak:rgba(251,146,60,0.20); } .dark[data-theme="brown"] { --brand:#FBBF24; --brand-weak:rgba(251,191,36,0.20); } /* ---------- أساسيات عامة ---------- */ html, body { font-family: var(--font-sans); background: var(--bg); color: var(--text); } * { box-sizing: border-box; } /* ---------- مساعدات border ---------- */ .bdr { border-color: var(--border); } .bdr-s { border-color: var(--border-strong); } /* ---------- القوائم المنسدلة: عناصر