/* ══════════════════════════════════════════════════════════════════════ css/themes/tokens.css — عقد متغيرات الـ "Look Theme" (Presentation Layer) ══════════════════════════════════════════════════════════════════════ ⚠ ملحوظة مهمة جداً: الموقع أصلاً فيه نظام "ثيم ألوان" شغال ومحفوظ من زمان (applyTheme في js/settings.js — 17 لوحة ألوان، محفوظة في config/settings وبتتطبّق لكل الزوار). النظام ده (Look Theme) نظام مختلف ومنفصل تماماً: بيتحكم في "شكل وتخطيط" الموقع (Layout/Typography/Spacing/Product Card Style)، مش الألوان. الاتنين شغالين مع بعض بدون تعارض: أي Look Theme (Classic/Minimal/Premium/Streetwear) بيقدر يشتغل مع أي لوحة ألوان (ذهبي/أحمر/أخضر...) اختارها الأدمن. ده بيدّي مرونة حقيقية بدل ما يبقى عندنا 17 لون × 4 أشكال = تركيبات معقدة تتبني كل واحدة لوحدها. كل قيمة هنا لازم تتحدد بـ var() في الـ CSS بتاع أي Component — ممنوع أي قيمة spacing/radius/columns تتكتب Hardcoded جوه ملف الثيم أو ملف الموقع العادي. ده اللي بيخلي "تغيير ثيم بالكامل" ممكن من غير ما تلمس عشرات الملفات — بس تغيّر القيم هنا (أو في ملف ثيم تاني بيوَرِّثها). القيم تحت هي قيم "Classic" الافتراضية (=تصميم الموقع الحالي بالظبط) — أي ملف ثيم تاني (مثل minimal.css) بيوَرِّث فوقها بس القيم اللي محتاج يغيّرها، تحت [data-theme="..."] على . ══════════════════════════════════════════════════════════════════════ */ :root{ /* ── الألوان: مربوطة بمتغيرات نظام applyTheme الموجود بالفعل (--gold/--black/...) بدل ما تتكرر — بالشكل ده أي لوحة ألوان يختارها الأدمن تفضل شغالة زي ما هي فوق أي Look Theme، من غير ما الثيمين يتعارضوا أو يتكرر تعريف لون. ── */ --theme-primary: var(--gold); --theme-secondary: var(--gold2); --theme-background: var(--black); --theme-surface: var(--card); --theme-text: var(--white); --theme-muted: var(--muted); --theme-border: var(--border); /* ── Layout / Spacing — قيم Classic (التصميم الحالي) ── */ --theme-radius: 0px; /* الموقع الحالي حواف حادة بالكامل تقريباً */ --theme-radius-lg: 0px; --theme-spacing-unit: 1rem; /* وحدة أساسية يُبنى عليها الـ padding/gap */ --theme-container-width: 1400px; --theme-section-gap: 0px; /* المسافة بين أقسام الصفحة الرئيسية (slider/promos/store...) */ /* ── Product Grid / Card ── */ --theme-product-columns: auto-fill; /* قيمة خاصة تتفكّ في main.css بمنطق clamp الحالي */ --theme-product-columns-desktop: 5; /* تستخدمها الثيمات اللي بتحدد عدد أعمدة صريح */ --theme-product-gap: 1px; --theme-card-style: sharp; /* sharp | soft | float — تتحكم في ظل/حدود الكارت */ --theme-card-border: 1px solid var(--theme-border); --theme-card-shadow: none; --theme-image-ratio: 1/1; --theme-card-info-density: full; /* full | compact — تتحكم في وصف/تقييم/شريط مخزون */ --theme-card-actions-visibility: always; /* always | hover — إظهار أزرار "أضف للسلة/عرض سريع" */ /* ── Typography ── */ --theme-font-display: 'Bebas Neue', sans-serif; --theme-font-body: 'Noto Sans Arabic', sans-serif; --theme-font-mono: 'Space Mono', monospace; --theme-heading-tracking: normal; --theme-heading-weight: 700; /* ── Buttons ── */ --theme-button-style: solid; /* solid | outline | text */ --theme-button-radius: var(--theme-radius); } /* Classic صراحةً — نفس قيم :root بالظبط (موجودة كـ توثيق صريح للمعمارية، مش لازمة وظيفياً لأن :root هي الافتراضي أصلاً) */ [data-theme="classic"]{ --theme-radius: 0px; --theme-card-style: sharp; --theme-card-info-density: full; --theme-card-actions-visibility: always; }