/* ════════════════════════════════════════════════════
   تواصُل · Design Tokens
   مستوحى من لوغو الغافقي: فيروزي + أسود + عاجي
   ════════════════════════════════════════════════════ */

:root {
  /* ─── الألوان الأساسية ─────────────────────────── */
  
  /* الفيروزي (من اللوغو) */
  --turquoise: #1FB3B8;
  --turquoise-bright: #2DC9CE;
  --turquoise-deep: #178A8E;
  --turquoise-darker: #0E5A5D;
  --turquoise-glow: rgba(31, 179, 184, 0.4);
  --turquoise-soft: rgba(31, 179, 184, 0.08);
  --turquoise-line: rgba(31, 179, 184, 0.18);
  
  /* الأسود الفحمي */
  --noir: #0A0908;
  --noir-deep: #050403;
  --noir-elevated: #131110;
  --noir-card: #1A1816;
  --noir-overlay: rgba(10, 9, 8, 0.85);
  
  /* العاجي والأبيض المخطوط */
  --pearl: #F5ECD7;
  --pearl-soft: #E8DCC0;
  --pearl-dim: #C9BB9C;
  --ivory: #FAF6EC;
  
  /* الرمادي المحايد */
  --whisper: #4A4138;
  --whisper-light: #6B5E50;
  --whisper-dim: #2B2620;
  
  /* الخطوط الفاصلة */
  --line: rgba(245, 236, 215, 0.10);
  --line-bright: rgba(245, 236, 215, 0.20);
  --line-turquoise: rgba(31, 179, 184, 0.18);
  
  /* ─── الخطوط ───────────────────────────────────── */
  --font-arabic: 'Amiri', 'Traditional Arabic', serif;
  --font-display: 'Cormorant Garamond', 'Amiri', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* أوزان الخطوط */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  
  /* ─── المسافات (8pt grid) ──────────────────────── */
  --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: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6rem;     /* 96px */
  
  /* ─── الزوايا المستديرة ────────────────────────── */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* ─── الظلال ───────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 40px rgba(31, 179, 184, 0.15);
  --shadow-glow-strong: 0 0 80px rgba(31, 179, 184, 0.25);
  
  /* ─── الانتقالات ───────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
  
  /* ─── المقاييس ─────────────────────────────────── */
  --max-content: 1400px;
  --max-prose: 720px;
  --header-h: 5rem;
  --footer-h: 4rem;
  
  /* ─── المنصات (ألوان مرجعية) ──────────────────── */
  --platform-tiktok: #FE2C55;
  --platform-instagram: #E4405F;
  --platform-facebook: #1877F2;
}

/* ─── الوضع الفاتح (مستقبلي) ───────────────────── */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    /* سنفعّل هذا لاحقاً إذا أردت */
  }
}