/* =========================================================================
   ATHAR — DESIGN TOKENS
   نظام التصميم الأساسي لوكالة "أثر للتسويق الرقمي"
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. ألوان الهوية (Brand Colors)
     --------------------------------------------------------------------- */

  /* Primary — أزرق حبري عميق (ثقة/احترافية) */
  --color-primary-900: #0A1729;
  --color-primary-700: #0C1B30;
  --color-primary:      #10233F;
  --color-primary-600:  #16305A;
  --color-primary-500:  #1E4079;
  --color-primary-100:  #E3E8F0;
  --color-primary-50:   #EEF1F6;

  /* Secondary — أخضر زمردي عميق (نمو/توازن) */
  --color-secondary-700: #0A3A30;
  --color-secondary:     #0E4B3E;
  --color-secondary-600: #135F4E;
  --color-secondary-100: #E1EEEA;

  /* Accent — ذهبي مطفي (تميّز/فخامة) */
  --color-accent-700: #8F702F;
  --color-accent-600: #B38B3F;
  --color-accent:      #C6A15B;
  --color-accent-400:  #D7BC85;
  --color-accent-100:  #F5EEDF;

  /* ---------------------------------------------------------------------
     2. محايدات وأسطح (Neutrals & Surfaces)
     --------------------------------------------------------------------- */
  --color-bg:          #F8F7F4;   /* خلفية عامة دافئة */
  --color-bg-alt:      #F1EFEA;
  --color-surface:     #FFFFFF;   /* بطاقات/عناصر */
  --color-surface-alt: #FBFAF8;
  --color-border:        #E4E1D8;
  --color-border-strong: #D6D2C4;

  /* عكس اللون الداكن (للأقسام الغامقة) */
  --color-dark-surface: #0C1729;
  --color-dark-surface-alt: #101C33;
  --color-dark-border: #22304A;

  /* ---------------------------------------------------------------------
     3. ألوان النصوص (Typography Colors)
     --------------------------------------------------------------------- */
  --color-text-primary:   #12172B;
  --color-text-secondary: #5B6472;
  --color-text-muted:     #8B93A0;
  --color-text-inverse:   #FFFFFF;
  --color-text-inverse-muted: #B9C2D4;

  /* ---------------------------------------------------------------------
     4. ألوان الحالة (Feedback Colors)
     --------------------------------------------------------------------- */
  --color-success:      #1E9E6C;
  --color-success-100:  #E4F5EE;
  --color-warning:      #E2A63B;
  --color-warning-100:  #FBF1E1;
  --color-error:        #D94F4F;
  --color-error-100:    #FBE9E9;
  --color-info:         #2F6FED;
  --color-info-100:     #E8F0FE;

  /* ---------------------------------------------------------------------
     5. التدرجات (Gradients)
     --------------------------------------------------------------------- */
  --gradient-primary: linear-gradient(135deg, #0A1729 0%, #16305A 55%, #1E4079 100%);
  --gradient-accent:  linear-gradient(135deg, #C6A15B 0%, #E4CB98 100%);
  --gradient-mesh: radial-gradient(60% 60% at 20% 20%, rgba(198,161,91,0.16) 0%, rgba(198,161,91,0) 60%),
                    radial-gradient(50% 50% at 85% 15%, rgba(14,75,62,0.18) 0%, rgba(14,75,62,0) 60%),
                    radial-gradient(70% 70% at 50% 100%, rgba(16,35,63,0.10) 0%, rgba(16,35,63,0) 60%);

  /* ---------------------------------------------------------------------
     6. الخطوط (Typography)
     --------------------------------------------------------------------- */
  --font-heading: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Alexandria', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* مقياس الخطوط المرن (Fluid Type Scale) */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-lg:   clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --fs-xl:   clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --fs-2xl:  clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  --fs-3xl:  clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
  --fs-4xl:  clamp(3.25rem, 2.4rem + 3.8vw, 5.25rem);

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.85;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;

  /* ---------------------------------------------------------------------
     7. المسافات (Spacing Scale — 4px base)
     --------------------------------------------------------------------- */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ---------------------------------------------------------------------
     8. نصف القطر (Border Radius)
     --------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 999px;

  /* ---------------------------------------------------------------------
     9. الظلال (Shadows) — بلمسة زرقاء ناعمة
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 35, 63, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 35, 63, 0.06), 0 1px 2px rgba(16, 35, 63, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 35, 63, 0.08), 0 2px 6px rgba(16, 35, 63, 0.05);
  --shadow-lg: 0 16px 40px rgba(16, 35, 63, 0.12), 0 4px 12px rgba(16, 35, 63, 0.06);
  --shadow-xl: 0 24px 64px rgba(16, 35, 63, 0.16), 0 8px 20px rgba(16, 35, 63, 0.08);
  --shadow-accent: 0 12px 32px rgba(198, 161, 91, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.4);

  /* ---------------------------------------------------------------------
     10. الحركة والانتقالات (Motion)
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* ---------------------------------------------------------------------
     11. الحاويات والشبكة (Containers & Grid)
     --------------------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1180px;
  --container-xl:  1320px;
  --container-2xl: 1560px; /* Ultra-wide */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------------------------------------------------------------------
     12. الطبقات (Z-Index Scale)
     --------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 950;
  --z-top: 999;
}