/* ═══════════════════════════════════════════════════════════
   EL-SHIDeed Technology HUB — Design Tokens v2
   Brand: Deep Blue + Technology Gold
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Brand Colors */
  --brand-blue:        #002969;
  --brand-blue-dark:   #001a45;
  --brand-blue-light:  #0a4a9c;
  --brand-blue-soft:   #e8effa;
  --brand-blue-mid:    #1565c0;

  --brand-gold:        #E7B41A;
  --brand-gold-light:  #F2C94C;
  --brand-gold-dark:   #B48B0D;
  --brand-gold-soft:   #FFF7DB;

  /* Neutrals */
  --text-primary:      #0F172A;
  --text-secondary:    #475569;
  --text-muted:        #94a3b8;
  --text-on-dark:      #FFFFFF;
  --text-on-dark-muted:#B9C4DA;

  --background:        #FFFFFF;
  --surface:           #F8FAFC;
  --surface-elevated:  #FFFFFF;
  --surface-dark:      #0F1B2D;
  --border:            #E2E8F0;
  --border-strong:     #CBD5E1;

  /* States */
  --success: #16A34A;  --success-bg: #dcfce7;
  --warning: #F59E0B;  --warning-bg: #fef3c7;
  --danger:  #DC2626;  --danger-bg:  #fee2e2;
  --info:    #2563EB;  --info-bg:    #dbeafe;
  --purple:  #7c3aed;  --purple-bg:  #ede9fe;

  /* Typography */
  --font-heading: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Fira Code', ui-monospace, monospace;

  /* Fluid Typography */
  --fs-xs:   clamp(0.7rem,  0.68rem + 0.1vw,  0.75rem);
  --fs-sm:   clamp(0.82rem, 0.8rem  + 0.1vw,  0.875rem);
  --fs-md:   clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --fs-lg:   clamp(1.05rem, 1rem    + 0.25vw, 1.15rem);
  --fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw,  1.5rem);
  --fs-2xl:  clamp(1.5rem,  1.35rem + 0.75vw, 2rem);
  --fs-3xl:  clamp(1.85rem, 1.6rem  + 1.25vw, 2.5rem);
  --fs-4xl:  clamp(2.25rem, 1.9rem  + 1.75vw, 3.25rem);

  --lh-tight:  1.25;
  --lh-normal: 1.7;
  --lh-loose:  1.9;

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

  /* Spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-pill: 999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:  0 2px 4px rgba(15,23,42,.06);
  --shadow-md:  0 6px 16px rgba(15,23,42,.08);
  --shadow-lg:  0 16px 40px rgba(15,23,42,.12);
  --shadow-xl:  0 24px 64px rgba(15,23,42,.16);
  --shadow-gold:0 8px 24px rgba(231,180,26,.35);

  /* Layout */
  --container-max: 1240px;
  --container-wide: 1400px;
  --container-narrow: 800px;
  --header-height: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* Z-Index */
  --z-header: 100;
  --z-float: 900;
  --z-modal: 9999;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}