/* عزم — توكنز الويب (النظام، الموقع، صفحات الهبوط، المتجر)
   2026-10-26. مبني على _brand/kit/tokens.css (ألوان البراند العشرة) + ألوان واجهة لازمة للويب فقط.
   الاستخدام: <link rel="stylesheet" href="tokens.css"> ثم استعمل المتغيرات الدلالية (--bg, --text, --primary…)
   مش الألوان الخام مباشرة. الوضع الداكن: data-theme="dark" على <html> أو أي حاوية. */

@import url('fonts/fonts.css');

:root {
  /* ===== 1. ألوان البراند العشرة (لا تُضاف عليها) ===== */
  --c-ink: #1D1D1F;
  --c-fine: #86868B;
  --c-canvas: #F5F5F7;
  --c-white: #FFFFFF;
  --c-black: #000000;
  --c-sapphire: #405FFA;
  --c-cyan: #09BBC8;
  --c-frozen: #D9FCED;
  --c-mint: #C3F9F1;
  --c-navy: #0B1A4A;

  /* ===== 2. ألوان واجهة (ويب فقط، ممنوعة بالإعلانات) ===== */
  --c-muted: #6E6E73;        /* نص ثانوي صغير. الـ fine يفشل تباين على الأبيض (3.6) */
  --c-line: #E3E3E8;         /* حدود وفواصل */
  --c-line-strong: #C9C9CF;  /* حد حقل الإدخال */
  --c-sapphire-hover: #3550E8;
  --c-sapphire-soft: #EEF1FF;
  --c-success: #067647;  --c-success-soft: #ECFDF3;
  --c-warning: #B54708;  --c-warning-soft: #FFFAEB;
  --c-danger:  #D92D20;  --c-danger-soft:  #FEF3F2;
  --c-dark-surface: #1D1D1F; /* = ink، سطح البطاقات على الأسود */
  --c-dark-line: #2C2C2E;

  /* التدرجان: دايماً من السيان */
  --grad-light: linear-gradient(90deg, var(--c-cyan), var(--c-sapphire));
  --grad-dark: linear-gradient(90deg, var(--c-cyan), var(--c-frozen));

  /* ===== 3. الخط ===== */
  --riyal-img: url('assets/riyal.png');
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
  /* سلّم الأحجام (px) */
  --fs-12: 12px;  /* قانوني، تسميات صغيرة */
  --fs-14: 14px;  /* نص ثانوي، حقول، جداول */
  --fs-16: 16px;  /* نص أساسي */
  --fs-18: 18px;  /* مقدمة، سعر بالبطاقة */
  --fs-22: 22px;  /* عنوان بطاقة */
  --fs-28: 28px;  /* عنوان قسم */
  --fs-36: 36px;  /* عنوان صفحة */
  --fs-48: 48px;  /* هيرو (موبايل: 36) */
  --fs-64: 64px;  /* رقم بطل (موبايل: 48) */
  --lh-tight: 1.2; --lh-body: 1.6;

  /* ===== 4. المسافات (مضاعفات 4) ===== */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ===== 5. الزوايا ===== */
  --r-sm: 8px;     /* شارة مربعة، صورة صغيرة */
  --r-md: 12px;    /* حقل إدخال، تنبيه */
  --r-lg: 16px;    /* بطاقة صغيرة */
  --r-xl: 24px;    /* بطاقة، قسم، سلايدر */
  --r-pill: 999px; /* زر، شارة، فلتر */

  /* ===== 6. الظل: البراند مسطح. الظل للعناصر الطايرة بس ===== */
  --shadow-pop: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); /* قائمة، نافذة، توست */
  --focus-ring: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-sapphire);

  /* ===== 7. الحركة ===== */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms; --dur: 200ms;

  /* ===== 8. التخطيط ===== */
  --container: 1200px;
  --gutter: 16px;            /* موبايل */
  --control-h: 48px;         /* زر وحقل */
  --control-h-sm: 36px;

  /* ===== الدلالي: فاتح (الافتراضي) ===== */
  --bg: var(--c-white);
  --bg-subtle: var(--c-canvas);
  --surface: var(--c-white);
  --text: var(--c-ink);
  --text-2: var(--c-muted);
  --border: var(--c-line);
  --border-strong: var(--c-line-strong);
  --primary: var(--c-sapphire);
  --primary-hover: var(--c-sapphire-hover);
  --on-primary: var(--c-white);
  --primary-soft: var(--c-sapphire-soft);
  --link: var(--c-sapphire);
  --accent-grad: var(--grad-light);
  --btn-dark-bg: var(--c-black);
  --btn-dark-fg: var(--c-white);
}

[data-theme="dark"] {
  --bg: var(--c-black);
  --bg-subtle: var(--c-dark-surface);
  --surface: var(--c-dark-surface);
  --text: var(--c-white);
  --text-2: var(--c-fine);           /* 5.8 على الأسود */
  --border: var(--c-dark-line);
  --border-strong: #3A3A3C;
  --primary: var(--c-sapphire);
  --primary-hover: #5470FF;
  --on-primary: var(--c-white);
  --primary-soft: rgba(64,95,250,.18);
  --link: var(--c-cyan);              /* 8.9 على الأسود */
  --accent-grad: var(--grad-dark);
  --btn-dark-bg: var(--c-white);
  --btn-dark-fg: var(--c-black);
  --c-success-soft: rgba(6,118,71,.22);  --c-success: #47CD89;
  --c-warning-soft: rgba(181,71,8,.22);  --c-warning: #FDB022;
  --c-danger-soft:  rgba(217,45,32,.22); --c-danger:  #F97066;
  --focus-ring: 0 0 0 2px var(--c-black), 0 0 0 4px var(--c-cyan);
  color-scheme: dark;
}

@media (max-width: 640px) {
  :root { --fs-48: 36px; --fs-64: 48px; --fs-36: 28px; }
}