/* ===================================================================== الهوية البصرية «تكتيكي» — المتغيرات (Design Tokens) المصدر الوحيد لكل الألوان والخطوط والمسافات في المشروع. ممنوع كتابة أي لون مباشرة داخل مكوّن — استخدم المتغيرات فقط. ===================================================================== */ :root { /* ── لوحة الألوان الأساسية (SPECS 3.1) ── */ --olive: #3B4530; --olive-2: #4A5639; --olive-3: #5B6847; --ink: #1F2419; --ink-2: #272D20; --ink-3: #30382A; --signal: #E07B2A; --signal-l: #F0924A; --signal-d: #B8621F; --paper: #EAE0C4; --paper-2: #F4EEDC; --paper-3: #FBF8EF; --sand: #CDB88A; --sand-d: #A8946A; /* ── ألوان الحالات (متناسقة مع الزيتوني) ── */ --success: #4E8A3E; --warning: #C9971A; --danger: #C0392B; --info: #3F7CAC; --neutral: #7A7A66; /* ── الخطوط — تتغير حسب data-font على ── */ --font-cairo: 'Cairo', Tahoma, sans-serif; --font-kufi: 'Noto Kufi Arabic', 'Cairo', Tahoma, sans-serif; --font-latin: 'Saira Condensed', 'Cairo', sans-serif; --font-body: var(--font-cairo); --font-head: var(--font-cairo); /* المعتمد: Cairo لكل النصوص والعناوين */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: clamp(22px, 3vw, 28px); --fs-2xl: clamp(26px, 4.5vw, 40px); /* ── المسافات (مقياس 4px) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── الزوايا: صغيرة + قطع مشطوف (طابع تكتيكي) ── */ --r-sm: 3px; --r: 5px; --cut: 10px; /* حجم الزاوية المشطوفة */ --cut-sm: 6px; /* ── الظلال والحركة ── */ --shadow-sm: 0 1px 3px rgba(31,36,25,.10); --shadow: 0 4px 18px rgba(31,36,25,.14); --shadow-lg: 0 10px 40px rgba(31,36,25,.28); --ease: .2s ease; /* ── التخطيط ── */ --container: 1200px; --nav-h: 66px; --sidebar-w: 260px; --topbar-h: 62px; /* ── الألوان الدلالية — الوضع الفاتح (الموقع العام) ── */ --bg: var(--paper); --surface: var(--paper-3); --surface-2: var(--paper-2); --text: var(--ink); --text-muted: #5E5B48; --text-faint: #8A8670; --border: rgba(59,69,48,.18); --border-strong: rgba(59,69,48,.35); --accent: var(--signal); --accent-text: var(--ink); --focus-ring: 0 0 0 3px rgba(224,123,42,.28); --input-bg: #fff; --row-hover: rgba(59,69,48,.05); --contour: rgba(59,69,48,.07); } /* ── الوضع الداكن (لوحة الإدارة) ── */ [data-theme="dark"] { --bg: var(--ink); --surface: var(--ink-2); --surface-2: var(--ink-3); --text: var(--paper); --text-muted: #B9AF93; --text-faint: #8C8570; --border: rgba(234,224,196,.09); --border-strong: rgba(234,224,196,.2); --input-bg: #1A1F15; --row-hover: rgba(234,224,196,.035); --contour: rgba(234,224,196,.05); --shadow: 0 4px 18px rgba(0,0,0,.35); --shadow-lg: 0 10px 40px rgba(0,0,0,.5); } /* ── خيارات الخطوط (تُحسم في Style Guide ثم يُثبت الخيار المعتمد) ── */ [data-font="cairo"] { --font-body: var(--font-cairo); --font-head: var(--font-cairo); } [data-font="mix"] { --font-body: var(--font-cairo); --font-head: var(--font-kufi); } [data-font="kufi"] { --font-body: var(--font-kufi); --font-head: var(--font-kufi); }