/* ============================================================ 🎨 theme.css — نظام الثيم الديناميكي (Dynamic Theming) ULTRAS STORE ------------------------------------------------------------ كل ألوان الموقع تُشتق من هذه المتغيرات. - الثيم الأساسي = ألوان Ultras (أحمر/أسود/أبيض). - عند اختيار نادٍ: يقوم theme.js بتعديل (--primary-color) و(--secondary-color) فقط، فيتغير الموقع كله. ============================================================ */ :root { /* ---- ألوان العلامة الأساسية (Brand Palette) ---- */ --flame-red: #e62a2a; /* الأحمر الناري */ --matte-black: #111111; /* الأسود المطفي */ --stark-white: #ffffff; /* الأبيض الناصع */ /* ---- المتغيرات الديناميكية (يُحدّثها JS عند اختيار النادي) ---- */ --primary-color: var(--flame-red); /* اللون الأساسي/المميز */ --secondary-color: var(--matte-black); /* اللون الثانوي */ /* مشتقات تُحسب برمجياً في theme.js (تباين النص فوق اللون الأساسي) */ --primary-contrast: #ffffff; /* لون النص فوق --primary-color */ --secondary-contrast: #ffffff; /* لون النص فوق --secondary-color */ /* ---- ألوان السطح والخلفيات ---- */ --bg-body: #0d0d0d; --bg-surface: #1a1a1a; --bg-surface-2: #242424; --bg-elevated: #2e2e2e; /* ---- ألوان النص ---- */ --text-primary: #f5f5f5; --text-muted: #a3a3a3; --text-inverse: #111111; /* ---- ألوان الحدود ---- */ --border-color: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); /* ---- ألوان الحالة (Status) ---- */ --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* ---- الظلال ---- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55); --shadow-primary: 0 8px 24px color-mix(in srgb, var(--primary-color) 35%, transparent); /* ---- نصف الأقطار (Radius) ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* ---- المسافات (Spacing scale) ---- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; /* ---- الطباعة ---- */ --font-base: "Cairo", "Tajawal", system-ui, "Segoe UI", sans-serif; --font-display: "Tajawal", "Cairo", sans-serif; /* ---- التخطيط ---- */ --container-max: 1280px; --header-height: 72px; /* ---- الانتقالات ---- */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-theme: 0.4s ease; /* انتقال سلس عند تبديل ثيم النادي */ } /* علامة على عند تطبيق ثيم نادٍ (للأنماط الخاصة إن لزم) */ :root[data-club-theme] { --is-club-theme: 1; } /* انتقال ناعم لألوان الموقع عند تبديل الثيم — فقط بعد التحميل الأول */ /* يضاف .theme-ready بواسطة JS بعد أول رسم لمنع وميض الألوان عند فتح الصفحة */ body.theme-ready, body.theme-ready .themed, body.theme-ready .btn, body.theme-ready .card, body.theme-ready .site-header { transition: background-color var(--transition-theme), border-color var(--transition-theme), color var(--transition-theme); }