/* ==========================================================================
   Arabshop — الرموز التصميمية (Design Tokens)
   لا لون ولا خط ولا حجم ثابت هنا: كل القيم الأساسية تأتي من إعدادات القالب
   (config/settings_schema.json) ويطبعها layout/theme.liquid متغيّراتٍ مرة واحدة،
   وهذا الملف يشتق منها الدرجات (color-mix) فقط. غيّر الهوية من محرّر القالب.
   ========================================================================== */

/* المتغيّرات المشتقّة تُعرَّف على :root وعلى كل قسم له نمط ألوان (.color-scheme)،
   فيعاد حسابها من ألوان النمط داخل القسم. */
:root, .color-scheme {
  /* ── اللون الأساسي ودرجاته ─────────────────────────────────────────────── */
  --brand-50:  color-mix(in srgb, var(--primary) 7%, var(--card-bg));
  --brand-100: color-mix(in srgb, var(--primary) 16%, var(--card-bg));
  --brand-200: color-mix(in srgb, var(--primary) 34%, var(--card-bg));
  --brand-300: color-mix(in srgb, var(--primary) 56%, var(--card-bg));
  --brand-400: color-mix(in srgb, var(--primary) 78%, var(--card-bg));
  --brand-500: color-mix(in srgb, var(--primary) 90%, var(--card-bg));
  --brand-600: var(--primary);
  --brand-700: color-mix(in srgb, var(--primary) 82%, var(--shadow-color));
  --brand-800: color-mix(in srgb, var(--primary) 66%, var(--shadow-color));
  --brand-900: color-mix(in srgb, var(--primary) 50%, var(--shadow-color));

  /* ── الحبر: النص بثلاث درجات ثانوية كما في التصميم الأصلي ─────────────── */
  --ink-900: var(--ink);
  --ink-800: color-mix(in srgb, var(--ink) 92%, var(--muted));
  --ink-700: color-mix(in srgb, var(--ink) 80%, var(--muted));
  --ink-600: color-mix(in srgb, var(--ink) 50%, var(--muted));
  --ink-500: var(--muted);
  --ink-400: color-mix(in srgb, var(--muted) 70%, var(--bg));
  --ink-300: color-mix(in srgb, var(--muted) 40%, var(--bg));

  /* ── الثانوي (الذهبي): للعروض والتمييز ────────────────────────────────── */
  --gold-50:  color-mix(in srgb, var(--accent) 8%, var(--card-bg));
  --gold-100: color-mix(in srgb, var(--accent) 18%, var(--card-bg));
  --gold-300: color-mix(in srgb, var(--accent) 50%, var(--card-bg));
  --gold-500: var(--accent);
  --gold-600: color-mix(in srgb, var(--accent) 86%, var(--ink));
  --gold-700: color-mix(in srgb, var(--accent) 70%, var(--ink)); /* toward the text colour: darker on light, lighter on dark */

  /* ── دافئ هادئ (خلفيات ناعمة) ─────────────────────────────────────────── */
  --sand-50:  color-mix(in srgb, var(--accent) 4%, var(--bg));
  --sand-100: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --sand-200: color-mix(in srgb, var(--accent) 16%, var(--bg));
  --sand-300: color-mix(in srgb, var(--accent) 28%, var(--bg));

  /* ── الأسطح والحدود ────────────────────────────────────────────────────── */
  --surface:       var(--card-bg);
  --surface-muted: color-mix(in srgb, var(--bg) 96%, var(--ink));
  --surface-sunk:  color-mix(in srgb, var(--bg) 92%, var(--ink));
  --border:        var(--line);
  --border-strong: color-mix(in srgb, var(--line) 82%, var(--ink));
  --thumb:         var(--surface-muted);

  /* ── ألوان الحالة وخلفياتها الخفيفة ───────────────────────────────────── */
  --success-50: color-mix(in srgb, var(--success) 10%, var(--card-bg));
  --warning-50: color-mix(in srgb, var(--warning) 10%, var(--card-bg));
  --warning-700: color-mix(in srgb, var(--warning) 70%, var(--ink)); /* amber TEXT: ≥ 4.5:1 on --warning-50 in light and dark; --warning stays for borders and icons */
  --danger-50:  color-mix(in srgb, var(--danger) 10%, var(--card-bg));
  --info-50:    color-mix(in srgb, var(--info) 10%, var(--card-bg));

  /* ── التعتيم والنص فوق الصور ──────────────────────────────────────────── */
  --overlay:      color-mix(in srgb, var(--shadow-color) 48%, transparent);
  --on-media-72:  color-mix(in srgb, var(--on-media) 72%, transparent);
  --on-media-16:  color-mix(in srgb, var(--on-media) 16%, transparent);
  --on-media-10:  color-mix(in srgb, var(--on-media) 10%, transparent);
}

:root {
/* ── الخطوط ──────────────────────────────────────────────────────────── */
  /* الخطان (--font-display / --font-body) والحجم الأساسي (--font-size-base) من الإعدادات */
  --font-num:     var(--font-body);

  /* مقياس نصي متناسق */
  --text-2xs: 0.75rem;    /* 12 — أصغر حجم مقروء للعربية */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  calc(var(--font-size-base) - 0.0625rem);
  --text-base:var(--font-size-base);  /* أساس الواجهة: من الإعدادات */
  --text-md:  1rem;       /* 16 */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.375rem;   /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */
  --text-4xl: 2.875rem;   /* 46 */

  --leading-tight: 1.35; /* IBM Plex Sans Arabic: room for the marks above and below in headings */
  --leading-snug:  1.45;
  --leading-normal:1.75; /* العربية تحتاج سطراً أوسع من اللاتينية */

  /* ── المسافات ────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;   --space-2: 0.5rem;    --space-3: 0.75rem;
  --space-4: 1rem;      --space-5: 1.25rem;   --space-6: 1.5rem;
  --space-8: 2rem;      --space-10: 2.5rem;   --space-12: 3rem;
  --space-16: 4rem;     --space-20: 5rem;     --space-24: 6rem;

  /* ── الزوايا: من زوايا الأزرار والبطاقات والحقول في الإعدادات ─────────── */
  --r-xs:   calc(var(--btn-radius) * 0.66);
  --r-sm:   var(--btn-radius);
  --r-md:   var(--card-radius);
  --r-lg:   calc(var(--card-radius) * 1.33);
  --r-xl:   calc(var(--card-radius) * 1.66);
  --r-2xl:  calc(var(--card-radius) * 2.33);
  --r-input: var(--input-radius);
  --r-full: 999px; /* حبّة كاملة: ليست قيمة تصميم */

  /* ── الظلال: لون الظل × قوته من الإعدادات ─────────────────────────────── */
  --shadow-xs:  0 1px 2px color-mix(in srgb, var(--shadow-color) calc(5% * var(--shadow-k)), transparent);
  --shadow-sm:  0 1px 3px color-mix(in srgb, var(--shadow-color) calc(7% * var(--shadow-k)), transparent), 0 1px 2px color-mix(in srgb, var(--shadow-color) calc(4% * var(--shadow-k)), transparent);
  --shadow-md:  0 4px 14px color-mix(in srgb, var(--shadow-color) calc(7% * var(--shadow-k)), transparent), 0 2px 4px color-mix(in srgb, var(--shadow-color) calc(4% * var(--shadow-k)), transparent);
  --shadow-lg:  0 12px 32px color-mix(in srgb, var(--shadow-color) calc(10% * var(--shadow-k)), transparent), 0 4px 8px color-mix(in srgb, var(--shadow-color) calc(4% * var(--shadow-k)), transparent);
  --shadow-xl:  0 24px 56px color-mix(in srgb, var(--shadow-color) calc(14% * var(--shadow-k)), transparent);
  --shadow-brand: 0 8px 24px color-mix(in srgb, var(--primary) calc(24% * var(--shadow-k)), transparent);

  /* ── الحركة ──────────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   380ms;

  /* ── التخطيط ─────────────────────────────────────────────────────────── */
  /* --container (أقصى عرض) من الإعدادات */
  --container-narrow: calc(var(--container) * 0.7);
  --gutter:         1rem;
  --header-top:     2.25rem;
  --header-main:    4.5rem;
  --header-nav:     3rem;

  /* ── الطبقات ─────────────────────────────────────────────────────────── */
  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 60;
  --z-panel:  70;
  --z-toast:  90;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
    --text-3xl: 2.75rem;
    --text-4xl: 3.5rem;
  }
}

/* ==========================================================================
   أنماط ألوان الأقسام (إعداد color_scheme في كل قسم): كل نمط يضبط الخلفية والنص
   والبطاقات والحدود، والدرجات المشتقّة أعلاه تُعاد داخل القسم من هذه القيم.
   ========================================================================== */
.color-scheme { background: var(--bg); color: var(--ink-900); }
.color-scheme--page { /* ألوان الصفحة كما هي */ }
.color-scheme--soft {
  --bg: var(--scheme-soft-bg); --ink: var(--scheme-soft-text);
  --muted: color-mix(in srgb, var(--scheme-soft-text) 66%, var(--scheme-soft-bg));
  --line: color-mix(in srgb, var(--scheme-soft-text) 12%, var(--scheme-soft-bg));
}
.color-scheme--brand {
  --bg: var(--scheme-brand-bg); --ink: var(--scheme-brand-text);
  --muted: color-mix(in srgb, var(--scheme-brand-text) 76%, var(--scheme-brand-bg));
  --line: color-mix(in srgb, var(--scheme-brand-text) 18%, var(--scheme-brand-bg));
  --card-bg: color-mix(in srgb, var(--scheme-brand-text) 8%, var(--scheme-brand-bg));
  --primary: var(--scheme-brand-text); --on-primary: var(--scheme-brand-bg);
  /* amber text on a brand colour: the section's text colour on a tint of its background (≥ 4.5:1 light and dark) */
  --warning-50: color-mix(in srgb, var(--warning) 14%, var(--bg)); --warning-700: var(--ink);
}
.color-scheme--dark {
  --bg: var(--scheme-dark-bg); --ink: var(--scheme-dark-text);
  --primary: var(--dark-primary); --on-primary: var(--dark-on-primary); /* the dark-mode main colour: readable on a dark background */
  --muted: color-mix(in srgb, var(--scheme-dark-text) 72%, var(--scheme-dark-bg));
  --line: color-mix(in srgb, var(--scheme-dark-text) 12%, var(--scheme-dark-bg));
  --card-bg: color-mix(in srgb, var(--scheme-dark-text) 6%, var(--scheme-dark-bg));
}
/* A section's own colours (bg_color / text_color, UI/own-colors): over its colour style, in light mode (and in dark
   mode too with has-own-dark); muted text, borders and cards follow them. Both classes may be on the same section (the text one then mixes with the own background). */
:root:not([data-mode="dark"]) .color-scheme.has-own-bg, .color-scheme.has-own-bg.has-own-dark { --bg: var(--own-bg); --card-bg: color-mix(in srgb, var(--ink) 6%, var(--own-bg)); --line: color-mix(in srgb, var(--ink) 14%, var(--own-bg)); --muted: color-mix(in srgb, var(--ink) 70%, var(--own-bg)); }
:root:not([data-mode="dark"]) .color-scheme.has-own-ink, .color-scheme.has-own-ink.has-own-dark { --ink: var(--own-ink); --muted: color-mix(in srgb, var(--own-ink) 70%, var(--bg)); --line: color-mix(in srgb, var(--own-ink) 14%, var(--bg)); }

/* Custom HTML / «تصميمي الخاص» kept light in dark mode (keep_light): the box is a light island, so the author's own
   colours (made for a light page) stay readable. */
:root[data-mode="dark"] .custom-html--light {
  color-scheme: light;
  --bg: var(--light-bg); --card-bg: var(--light-card); --ink: var(--light-ink); --muted: var(--light-muted); --line: var(--light-line);
  background: var(--light-bg); color: var(--light-ink);
}