/* ============================================================ Zoalk Design Tokens — v1.0 المصدر: خلاصة أفضل الممارسات من ملفات التصميم المرجعية المعمارية: Primitive ← Semantic ← (Component tokens لاحقاً) الوضع: Dark-first عبر data-mode على ============================================================ */ /* ------------------------------------------------------------ 1) PRIMITIVES — قيم خام، لا تُستخدم في المكونات مباشرة أبداً ------------------------------------------------------------ */ :root{ /* الباليتة: حبر / رمل / زمرد / ذهب */ --ink-900:#0B1210; --ink-800:#121B18; --ink-700:#1C2723; --ink-600:#2A3833; --ink-500:#3D4E47; --sand-50:#FBF7EE; --sand-100:#F4EFE2; --sand-200:#E5DCC6; --sand-300:#CFC2A0; --sand-400:#B3A57F; --emerald-600:#13513E; --emerald-500:#1E7A5C; --emerald-400:#34A37E; --emerald-300:#5FC79E; --gold-600:#9C7A1C; --gold-500:#C9A227; --gold-400:#E2BE4D; /* ألوان الحالات (Status) */ --green-600:#1E7A5C; --green-100:#E3F3EC; --amber-600:#B07C10; --amber-100:#FBF3DC; --red-600:#C0392B; --red-100:#FAE7E4; --blue-600:#2C6E9E; --blue-100:#E4EFF7; /* الخطوط — محلية self-hosted */ --font-display:'Cairo', system-ui, sans-serif; --font-body:'Tajawal', system-ui, sans-serif; /* سلم المسافات — أساس 4px */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; /* سلم الحواف */ --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem; --r-pill:999px; /* الحركة — توحيد كل الترانزيشنز */ --dur-fast:150ms; --dur-normal:250ms; --dur-slow:400ms; --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.4,0,.2,1); /* الخط السائل — يتمدد بين الموبايل والديسكتوب تلقائياً */ --fs-hero:clamp(1.9rem, 4.5vw, 3rem); --fs-h1:clamp(1.6rem, 3.4vw, 2.3rem); --fs-h2:clamp(1.3rem, 2.6vw, 1.8rem); --fs-h3:clamp(1.1rem, 2vw, 1.35rem); --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.78rem; /* التخطيط */ --header-h:4rem; --container-w:72rem; /* 1152px */ --container-narrow:44rem; /* نماذج وويزارد */ --prose-w:56ch; /* أقصى عرض للفقرات */ /* طبقات z-index */ --z-header:40; --z-drawer:50; --z-modal:60; --z-toast:70; } /* ------------------------------------------------------------ 2) SEMANTIC — Dark-first (الافتراضي)، المكونات تستهلك من هنا فقط ------------------------------------------------------------ */ :root, [data-mode="dark"]{ color-scheme:dark; --bg:var(--ink-900); --bg-elevated:var(--ink-800); --surface:var(--ink-700); --surface-2:var(--ink-600); --text:var(--sand-100); --text-muted:var(--sand-300); --text-dim:rgba(244,239,226,.55); --border:rgba(244,239,226,.09); --border-strong:rgba(244,239,226,.18); /* Primary = فعل وإجراء (زمرد) */ --primary:var(--emerald-400); --primary-strong:var(--emerald-300); --on-primary:#08130F; --primary-tint:rgba(52,163,126,.14); /* Accent = ثقة وقيمة: أسعار، تقييمات، شارات (ذهب) */ --accent:var(--gold-500); --accent-strong:var(--gold-400); --on-accent:#1B1303; --accent-tint:rgba(201,162,39,.14); /* الحالات: لون + خلفية تينت (نمط status-badge) */ --success:var(--emerald-300); --success-bg:rgba(52,163,126,.15); --warning:var(--gold-400); --warning-bg:rgba(201,162,39,.15); --danger:#E8705F; --danger-bg:rgba(192,57,43,.16); --info:#6FA8CE; --info-bg:rgba(44,110,158,.16); --shadow-sm:0 2px 8px rgba(0,0,0,.28); --shadow-md:0 10px 26px rgba(0,0,0,.34); --shadow-lg:0 20px 48px rgba(0,0,0,.42); } [data-mode="light"]{ color-scheme:light; --bg:var(--sand-100); --bg-elevated:var(--sand-50); --surface:#FFFFFF; --surface-2:var(--sand-200); --text:var(--ink-900); --text-muted:#5C6B62; --text-dim:rgba(11,18,16,.55); --border:rgba(11,18,16,.10); --border-strong:rgba(11,18,16,.20); --primary:var(--emerald-600); --primary-strong:var(--emerald-500); --on-primary:#FFFFFF; --primary-tint:rgba(19,81,62,.08); --accent:var(--gold-600); --accent-strong:var(--gold-500); --on-accent:#FFFFFF; --accent-tint:rgba(156,122,28,.10); --success:var(--green-600); --success-bg:var(--green-100); --warning:var(--amber-600); --warning-bg:var(--amber-100); --danger:var(--red-600); --danger-bg:var(--red-100); --info:var(--blue-600); --info-bg:var(--blue-100); /* ظلال بلون الحبر لا الأسود الصافي — أنعم */ --shadow-sm:0 2px 8px rgba(20,30,26,.08); --shadow-md:0 10px 26px rgba(20,30,26,.12); --shadow-lg:0 20px 48px rgba(20,30,26,.16); } /* ------------------------------------------------------------ 3) قواعد أساسية مرتبطة بالتوكنز ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; transition:background var(--dur-normal) var(--ease-in-out), color var(--dur-normal) var(--ease-in-out); } h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.3; } h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);} p{max-width:var(--prose-w);} img,svg{display:block;max-width:100%;} button,input,select,textarea{font-family:inherit;font-size:inherit;} a{color:var(--primary);text-decoration:none;} /* أرقام مصطفة — للأسعار والجداول والعدادات */ .num{font-variant-numeric:tabular-nums;} /* الوصولية: حلقة تركيز ذهبية موحدة */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } /* احترام تفضيل تقليل الحركة — مفتاح إيقاف شامل */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* الانتقال بين الصفحات — MPA بإحساس SPA */ @view-transition{ navigation:auto; }