/* ============================================================
   حروف التحدي — نظام التصميم (Design Tokens)
   الهوية: "ليل وذهب" — ليل عربي عميق + ذهب دافئ + نعناع للتأكيد
   ============================================================ */
:root {
  /* — الخلفيات — */
  --ink-950: #05080F;
  --ink-900: #070B14;
  --ink-850: #0A101C;
  --ink-800: #0C1220;
  --ink-700: #131B2C;
  --ink-600: #1B2437;
  --ink-500: #243049;

  /* — الذهب (اللون الأساسي) — */
  --gold-700: #9C6F21;
  --gold-600: #B9862C;
  --gold-500: #E4B04A;
  --gold-400: #F3CE7E;
  --gold-100: #FBF0D6;

  /* — ألوان الحالة — */
  --mint-500: #24B98C;
  --mint-400: #3FD6A8;
  --sky-400: #5AA9FF;
  --coral-500: #E24A5C;
  --coral-400: #FF6B7A;
  --violet-400: #A98BFF;

  /* — النصوص — */
  --text: #F6F3EC;
  --text-2: #C7CEDC;
  --text-muted: #8D97AB;
  --text-inverse: #0A101C;

  /* — الخطوط — */
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.075);

  /* — القطع الحرفية — */
  --tile-bg: #F3E9D2;
  --tile-ink: #14192A;
  --tile-shadow: 0 2px 0 #B8A98A, 0 6px 14px rgba(0, 0, 0, 0.45);

  /* — الخطوط الطباعية — */
  --font-display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, sans-serif;

  /* — المقاييس — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;

  /* — الظلال — */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 0 1px rgba(228, 176, 74, 0.35), 0 8px 30px rgba(228, 176, 74, 0.18);

  /* — الحركة — */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 380ms;

  /* — قياسات الجهاز — */
  --device-w: 390px;
  --device-h: 844px;
  --safe-top: 54px;
  --safe-bottom: 30px;
  --tabbar-h: 64px;
}