/* ============================================================
   دهشة — متغيّرات نظام التصميم (Design Tokens)
   نقطة واحدة للتحكم. كل ملفات الموقع تقرا من هنا.
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-500-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

:root {
  /* ---- الألوان (وضع النهار — الافتراضي) ---- */
  --rouge: #ff3131;
  --rouge-fonce: #d81e1e;
  --rouge-rgb: 255, 49, 49;
  --noir: #000000;
  --blanc: #ffffff;
  --ligne: #ececec;
  --texte: #141414;
  --texte-doux: #6b6b6b;
  --vert: #12b76a;

  /* الذهبي — لشارة الضمان برك، ما يُستعملش كلون عام */
  --or-clair: #f6d365;
  --or: #d4af37;
  --or-fonce: #9c7a1e;
  --or-rgb: 212, 175, 55;
  --glow-or: 0 0 0 1px rgba(var(--or-rgb), 0.5), 0 0 16px 2px rgba(var(--or-rgb), 0.55);
  --glow-or-hover: 0 0 0 1px rgba(var(--or-rgb), 0.7), 0 0 24px 5px rgba(var(--or-rgb), 0.75);

  /* تدرّج النار (شريط التوصيل المجاني) */
  --feu-1: #ff3131;
  --feu-2: #ff8a00;
  --feu-3: #ffd000;

  /* ---- ألوان الحالة (Semantic) ---- */
  --succes: var(--vert);
  --succes-bg: #eafaf1;
  --erreur: var(--rouge-fonce);
  --erreur-rgb: 216, 30, 30;
  --erreur-bg: #fdecec;
  --avertissement: #b7791e;
  --avertissement-bg: #fef3d6;
  --info: #2563a8;
  --info-bg: #eaf2fb;
  --etoile: #ffb400;

  /* أرضية الصفحة والسطوح */
  --bg: var(--blanc);
  --surface: var(--blanc);
  --surface-alt: var(--noir);

  /* ---- الخط ---- */
  --font-main: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- المسافات ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- الانحناءات ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- ظلال الأزرار (الحجم ثلاثي الأبعاد) ---- */
  --btn-highlight: inset 0 1.5px 0 rgba(255, 255, 255, 0.55);
  --btn-shade: inset 0 -3px 4px rgba(0, 0, 0, 0.22);
  --btn-glow-rest: 0 4px 14px -2px rgba(var(--rouge-rgb), 0.45), 0 2px 4px rgba(0, 0, 0, 0.15);
  --btn-glow-hover: 0 6px 22px -2px rgba(var(--rouge-rgb), 0.65), 0 3px 6px rgba(0, 0, 0, 0.18);
  --btn-glow-noir-rest: 0 4px 14px -2px rgba(0, 0, 0, 0.35);
  --btn-glow-noir-hover: 0 6px 20px -2px rgba(0, 0, 0, 0.5);

  /* ---- توهّج الدوائر والعناصر ---- */
  --glow-ring-rest: 0 0 0 2px rgba(var(--rouge-rgb), 0.35), 0 0 18px 2px rgba(var(--rouge-rgb), 0.35);
  --glow-ring-hover: 0 0 0 2px rgba(var(--rouge-rgb), 0.55), 0 0 28px 6px rgba(var(--rouge-rgb), 0.55);
  --glow-soft: 0 0 24px rgba(var(--rouge-rgb), 0.4);

  /* ---- سرعات ومسارات الحركة ---- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 150ms;
  --dur-mid: 300ms;
  --dur-slow: 600ms;
  --dur-exit: 220ms;

  /* ---- الظل العام للبطاقات ---- */
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.1);

  /* ---- نقشة هندسية بطابع تونسي (زليج) — تُستعمل بشفافية خفيفة برك ---- */
  --zellige-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='white' stroke-width='1'%3E%3Crect x='10' y='10' width='40' height='40' transform='rotate(45 30 30)'/%3E%3Crect x='10' y='10' width='40' height='40'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: var(--font-main);
  direction: rtl;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}