/* ============================================
   مؤسسة عبدالله خالد للمقاولات العامة
   نظام المتغيرات العام - Design Tokens
   ============================================ */

:root {
  color-scheme: light; /* يمنع المتصفح من فرض ألوان حقول تلقائية تتعارض مع ثيم الموقع */

  /* ===== الألوان الأساسية - Light Mode ===== */
  --color-bg-primary: #F7F5F1;        /* إسمنت مصقول - خلفية رئيسية */
  --color-bg-secondary: #EDE9E1;      /* رمل فاتح - خلفية ثانوية */
  --color-bg-tertiary: #FFFFFF;       /* أبيض للبطاقات */
  --color-surface-raised: #FFFFFF;

  --color-text-primary: #14171A;      /* أسود خرساني - نص رئيسي */
  --color-text-secondary: #4A5259;    /* رمادي فولاذي - نص ثانوي */
  --color-text-muted: #7A8288;

  --color-accent-primary: #B8935A;    /* نحاس/برونز معماري - اللون المميز */
  --color-accent-primary-hover: #A17F49;
  --color-accent-secondary: #3D4A3E;  /* أخضر زيتوني داكن - جبال السروات */

  --color-border: #DDD7CC;
  --color-border-strong: #C4BCAD;

  --color-success: #3D7A4D;
  --color-error: #B8432F;
  --color-warning: #C68A2E;

  /* ===== ظلال ===== */
  --shadow-sm: 0 1px 3px rgba(20, 23, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 23, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 23, 26, 0.12);
  --shadow-xl: 0 24px 64px rgba(20, 23, 26, 0.16);
  --shadow-accent: 0 8px 24px rgba(184, 147, 90, 0.25);

  /* ===== الزجاجية Glassmorphism ===== */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(16px);

  /* ===== الخطوط ===== */
  --font-display: 'Cairo', 'Tajawal', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ===== مقياس الطباعة ===== */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-6xl: 5.5rem;

  /* ===== المسافات ===== */
  --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-24: 6rem;
  --space-32: 8rem;

  /* ===== الحاويات ===== */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 5vw, 4rem);

  /* ===== نصف القطر ===== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ===== الانتقالات ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;

  /* ===== طبقات Z ===== */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ===== الوضع الليلي - Dark Mode ===== */
[data-theme="dark"] {
  color-scheme: dark; /* يجبر المتصفح على احترام ثيم الموقع بدل نمطه الداكن التلقائي المستقل */

  --color-bg-primary: #0B0D0F;
  --color-bg-secondary: #14171A;
  --color-bg-tertiary: #1C2023;
  --color-surface-raised: #1C2023;

  --color-text-primary: #F7F5F1;
  --color-text-secondary: #B8BFC4;
  --color-text-muted: #7A8288;

  --color-accent-primary: #D4AC78;
  --color-accent-primary-hover: #E0BD8E;
  --color-accent-secondary: #6B8A6E;

  --color-border: #2A2F33;
  --color-border-strong: #3A4045;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 8px 24px rgba(212, 172, 120, 0.3);

  --glass-bg: rgba(28, 32, 35, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
}