/* =====================================================
   theme.css — متغيرات نظام التصميم الأساسية
   نظام حلال — Arabic RTL SaaS
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;900&display=swap');

:root {
  /* ── الألوان الأساسية ── */
  --color-bg:        #F7F5F0;          /* خلفية الصفحة الكريمية */
  --color-surface:   #FFFFFF;          /* سطح البطاقات */
  --color-surface-2: #F3F0EA;          /* سطح ثانوي خفيف */
  --color-border:    rgba(0,0,0,0.07); /* حدود ناعمة */

  /* ── اللون المميز (أصفر/ذهبي) ── */
  --color-accent:    #E8C547;
  --color-accent-dark: #C9A832;
  --color-accent-light: #FDF3C0;
  --color-accent-glow: rgba(232, 197, 71, 0.25);

  /* ── الألوان الداكنة ── */
  --color-dark:      #1A1A2E;
  --color-dark-2:    #2D2D44;
  --color-dark-3:    #3E3E58;

  /* ── النصوص ── */
  --color-text:        #1A1A2E;
  --color-text-muted:  #6B7280;
  --color-text-light:  #9CA3AF;
  --color-text-white:  #FFFFFF;

  /* ── الألوان الدلالية ── */
  --color-success:    #10B981;
  --color-success-bg: #ECFDF5;
  --color-warning:    #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-danger:     #EF4444;
  --color-danger-bg:  #FEF2F2;
  --color-info:       #3B82F6;
  --color-info-bg:    #EFF6FF;
  --color-purple:     #8B5CF6;
  --color-purple-bg:  #F5F3FF;
  --color-teal:       #14B8A6;
  --color-teal-bg:    #F0FDFA;
  --color-orange:     #F97316;
  --color-orange-bg:  #FFF7ED;

  /* ── الظلال ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

  /* ── الحواف ── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ── المسافات ── */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* ── الخطوط ── */
  --font-family: 'Tajawal', 'Noto Naskh Arabic', sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   17px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  40px;

  /* ── الانتقالات ── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── الشريط العلوي ── */
  --topbar-height: 68px;
}

/* =====================================================
   إعادة تعيين أساسية
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  direction: rtl;
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: var(--topbar-height);
  /* خلفية مع توهج أصفر خفيف في الزاوية */
  background-image:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(232,197,71,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 100%, rgba(232,197,71,0.06) 0%, transparent 50%);
  background-attachment: fixed;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

img {
  max-width: 100%;
  display: block;
}

/* =====================================================
   مساعدات عامة (Utilities)
   ===================================================== */
.text-muted   { color: var(--color-text-muted) !important; }
.text-accent  { color: var(--color-accent-dark) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info    { color: var(--color-info) !important; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

.fs-xs   { font-size: var(--font-size-xs); }
.fs-sm   { font-size: var(--font-size-sm); }
.fs-base { font-size: var(--font-size-base); }
.fs-lg   { font-size: var(--font-size-lg); }
.fs-xl   { font-size: var(--font-size-xl); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Override Bootstrap colors to match theme */
.text-primary   { color: var(--color-dark) !important; }
.text-gray-300  { color: #D1D5DB !important; }
.text-gray-800  { color: var(--color-text) !important; }
.text-orange    { color: var(--color-orange) !important; }
.text-purple    { color: var(--color-purple) !important; }
.text-teal      { color: var(--color-teal) !important; }
.bg-purple      { background-color: var(--color-purple) !important; color: white !important; }
.border-teal    { border-color: var(--color-teal) !important; }
.border-purple  { border-color: var(--color-purple) !important; }
.border-orange  { border-color: var(--color-orange) !important; }