/* ==========================================================================
   DESIGN TOKENS — Single Source of Truth
   --------------------------------------------------------------------------
   كل القيم الأساسية معرّفة هنا فقط.
   أي تعديل على الملف ده ينعكس على الموقع كله تلقائي.
   ممنوع يكتب أي Component قيمة hard-coded.
   ========================================================================== */

:root {
  /* ============================ COLORS ============================ */
  /* Brand */
  --color-primary:            #C9A84C;
  --color-primary-light:       #E8C86A;
  --color-primary-dark:        #96731D;
  --color-primary-darker:      #6B5313;
  --color-primary-soft:        rgba(201, 168, 76, 0.12);
  --color-primary-softer:      rgba(201, 168, 76, 0.06);

  /* Secondary */
  --color-secondary:          #5B6B7C;
  --color-secondary-light:     #7E8FA1;

  /* Semantic */
  --color-danger:             #C0392B;
  --color-danger-light:       #E74C3C;
  --color-danger-soft:        rgba(192, 57, 43, 0.12);

  --color-success:            #1E8E5A;
  --color-success-light:      #28A76F;
  --color-success-soft:       rgba(30, 142, 90, 0.12);

  --color-warning:            #D68910;
  --color-warning-light:      #F0B429;
  --color-warning-soft:       rgba(214, 137, 16, 0.12);

  --color-info:               #2C7BE5;
  --color-info-soft:          rgba(44, 123, 229, 0.12);

  /* Backgrounds */
  --color-bg:                 #0A0A0A;
  --color-bg-alt:             #0F0F0F;
  --color-surface:            #141414;
  --color-surface-2:          #1A1A1A;
  --color-surface-3:          #212121;
  --color-surface-hover:      #242424;

  /* Text */
  --color-text:               #FFFFFF;
  --color-text-secondary:     #CCCCCC;
  --color-text-muted:         #999999;
  --color-text-disabled:      #555555;
  --color-text-inverse:       #0A0A0A;
  --color-gold:               #C9A84C;

  /* Borders */
  --color-border:             #2A2A2A;
  --color-border-light:       #333333;
  --color-border-strong:      #444444;
  --color-border-primary:     rgba(201, 168, 76, 0.45);
  --color-border-primary-full: #C9A84C;

  /* Overlays */
  --color-overlay:            rgba(0, 0, 0, 0.72);
  --color-overlay-light:      rgba(0, 0, 0, 0.45);

  /* ============================ TYPOGRAPHY ============================ */
  --font-family:              "Tajawal", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono:         "Cairo", ui-monospace, "Courier New", monospace;

  --font-size-xs:             0.75rem;   /* 12px */
  --font-size-sm:             0.8125rem; /* 13px */
  --font-size-base:           0.875rem;  /* 14px */
  --font-size-md:             1rem;      /* 16px */
  --font-size-lg:             1.125rem;  /* 18px */
  --font-size-xl:             1.375rem;  /* 22px */
  --font-size-2xl:            1.75rem;   /* 28px */
  --font-size-3xl:            2.25rem;   /* 36px */

  --font-weight-normal:       400;
  --font-weight-medium:       500;
  --font-weight-semibold:    600;
  --font-weight-bold:         700;
  --font-weight-extrabold:    800;
  --font-weight-black:        900;

  --line-height-tight:        1.2;
  --line-height-base:         1.6;
  --line-height-loose:        1.9;

  --letter-spacing-tight:     -0.5px;
  --letter-spacing-normal:    0;
  --letter-spacing-wide:      0.5px;
  --letter-spacing-wider:     2px;

  /* ============================ SPACING ============================ */
  --space-3xs:                2px;
  --space-2xs:                4px;
  --space-xs:                 8px;
  --space-sm:                 12px;
  --space-md:                 16px;
  --space-lg:                 24px;
  --space-xl:                 32px;
  --space-2xl:                48px;
  --space-3xl:                64px;
  --space-4xl:                96px;

  /* ============================ BORDER RADIUS ============================ */
  --radius-none:              0;
  --radius-xs:                4px;
  --radius-sm:                6px;
  --radius-md:                10px;
  --radius-lg:                14px;
  --radius-xl:                18px;
  --radius-2xl:               24px;
  --radius-full:              999px;

  /* ============================ SHADOWS ============================ */
  --shadow-xs:                0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:                0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md:                0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg:                0 12px 34px rgba(0, 0, 0, 0.55);
  --shadow-xl:                0 20px 50px rgba(0, 0, 0, 0.65);

  --shadow-primary-sm:        0 4px 14px rgba(201, 168, 76, 0.25);
  --shadow-primary-md:        0 8px 26px rgba(201, 168, 76, 0.35);
  --shadow-primary-lg:        0 12px 38px rgba(201, 168, 76, 0.45);
  --shadow-primary-glow:       0 0 22px rgba(201, 168, 76, 0.55);

  /* ============================ TRANSITIONS ============================ */
  --transition-instant:       80ms  cubic-bezier(0.4, 0, 1, 1);
  --transition-fast:          150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:          250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:          400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower:        700ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce:         400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spin:           900ms linear infinite;

  /* ============================ Z-INDEX ============================ */
  --z-base:                   1;
  --z-dropdown:               100;
  --z-sticky:                 200;
  --z-overlay:                900;
  --z-modal:                  1000;
  --z-popover:                1100;
  --z-toast:                  1200;
  --z-tooltip:                1300;

  /* ============================ BREAKPOINTS ============================ */
  /* تُستخدم في CSS عبر @media — القيم هنا للتوثيق والتوحيد */
  --breakpoint-xs:            380px;
  --breakpoint-sm:            576px;
  --breakpoint-md:            768px;
  --breakpoint-lg:            992px;
  --breakpoint-xl:            1200px;
  --breakpoint-2xl:           1440px;

  /* ============================ COMPONENT DEFAULTS ============================ */
  --control-height-sm:         34px;
  --control-height-md:         42px;
  --control-height-lg:         52px;

  --focus-ring-width:         2px;
  --focus-ring-offset:        2px;
}

/* ==========================================================================
   REDUCED MOTION — احترام إعدادات المستخدم
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}