/* ═══════════════════════════════════════════════════════════════
   SCORPION SLEEPED — DESIGN TOKENS v2.0
   مستوى Stripe / Linear / Vercel
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. PRIMITIVE TOKENS — القيم الخام ──────────────────────────
   لا تُستخدم مباشرة في المكونات — فقط كمصدر للـ semantic tokens
   ─────────────────────────────────────────────────────────────── */
:root {

  /* ─ Color Primitives ─ */
  --purple-50:  #f0eeff;
  --purple-100: #ddd8ff;
  --purple-200: #bfb5ff;
  --purple-300: #9d8fff;
  --purple-400: #7c6aff;
  --purple-500: #6354e0;
  --purple-600: #5040c0;
  --purple-700: #3d30a0;
  --purple-800: #2d2278;
  --purple-900: #1e1650;

  --green-50:  #e8faf2;
  --green-100: #c0f0da;
  --green-200: #88e4be;
  --green-300: #50d4a0;
  --green-400: #2dd48a;
  --green-500: #22b876;
  --green-600: #1a9962;
  --green-700: #137a4e;
  --green-800: #0d5c3a;
  --green-900: #083d26;

  --red-50:  #fff0f0;
  --red-100: #ffd8d8;
  --red-200: #ffaaaa;
  --red-300: #ff7a7a;
  --red-400: #ff5c5c;
  --red-500: #e84444;
  --red-600: #cc2e2e;
  --red-700: #a82020;
  --red-800: #841414;
  --red-900: #600a0a;

  --amber-50:  #fffbf0;
  --amber-100: #fff0c8;
  --amber-200: #ffd97a;
  --amber-300: #f5bc48;
  --amber-400: #f5a623;
  --amber-500: #e09010;
  --amber-600: #cc7700;
  --amber-700: #a85e00;
  --amber-800: #844600;
  --amber-900: #603000;

  --blue-50:  #eff6ff;
  --blue-100: #d4e9ff;
  --blue-200: #a8d2ff;
  --blue-300: #70b8ff;
  --blue-400: #38b2ff;
  --blue-500: #1a95e0;
  --blue-600: #0078c0;
  --blue-700: #005ea0;
  --blue-800: #004480;
  --blue-900: #002c60;

  --gray-0:   #ffffff;
  --gray-50:  #f8f8fa;
  --gray-100: #f0f0f4;
  --gray-200: #e4e4ea;
  --gray-300: #d0d0da;
  --gray-400: #9999aa;
  --gray-500: #70708a;
  --gray-600: #55556a;
  --gray-700: #3e3e52;
  --gray-800: #26262e;
  --gray-850: #1e1e24;
  --gray-900: #16161a;
  --gray-950: #0e0e10;
  --gray-1000: #060608;

  /* ─ Spacing Scale (4px base) ─ */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─ Border Radius Scale ─ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ─ Shadow Scale ─ */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.18);
  --shadow-glow: 0 0 0 3px rgba(124,106,255,0.25);

  /* ─ Typography Scale ─ */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  28px;
  --text-5xl:  32px;
  --text-6xl:  40px;

  /* ─ Font Weights ─ */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ─ Line Heights ─ */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* ─ Letter Spacing ─ */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ─ Transition ─ */
  --transition-fast:   100ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─ Z-Index Scale ─ */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-toast:   3000;
  --z-tooltip: 4000;
  --z-top:     9999;
}

/* ── 2. SEMANTIC TOKENS (Dark Mode — Default) ────────────────────
   يُستخدم مباشرة في المكونات
   ─────────────────────────────────────────────────────────────── */
:root {

  /* ─ Background Layers ─ */
  --color-bg:          var(--gray-950);   /* صفحة كاملة */
  --color-surface-0:   var(--gray-900);   /* كروت مرتفعة */
  --color-surface-1:   var(--gray-850);   /* كروت عادية */
  --color-surface-2:   var(--gray-800);   /* inputs وعناصر داخلية */
  --color-surface-3:   var(--gray-700);   /* hover states */
  --color-overlay:     rgba(0,0,0,0.65);  /* modal backdrop */

  /* ─ Text ─ */
  --color-text-primary:   var(--gray-50);   /* عناوين رئيسية */
  --color-text-secondary: var(--gray-400);  /* نصوص ثانوية */
  --color-text-tertiary:  var(--gray-600);  /* placeholder / disabled */
  --color-text-inverse:   var(--gray-950);  /* نص على خلفية فاتحة */
  --color-text-link:      var(--purple-400);

  /* ─ Border ─ */
  --color-border-subtle:  rgba(255,255,255,0.06);  /* خفيف جداً */
  --color-border-default: rgba(255,255,255,0.10);  /* الافتراضي */
  --color-border-strong:  rgba(255,255,255,0.18);  /* hover / focus */
  --color-border-accent:  var(--purple-400);

  /* ─ Brand / Accent ─ */
  --color-accent:        var(--purple-400);
  --color-accent-hover:  var(--purple-300);
  --color-accent-muted:  rgba(124,106,255,0.12);
  --color-accent-border: rgba(124,106,255,0.30);

  /* ─ Semantic States ─ */
  --color-success:        var(--green-400);
  --color-success-muted:  rgba(45,212,138,0.12);
  --color-success-border: rgba(45,212,138,0.30);

  --color-danger:         var(--red-400);
  --color-danger-muted:   rgba(255,92,92,0.12);
  --color-danger-border:  rgba(255,92,92,0.30);

  --color-warning:        var(--amber-400);
  --color-warning-muted:  rgba(245,166,35,0.12);
  --color-warning-border: rgba(245,166,35,0.30);

  --color-info:           var(--blue-400);
  --color-info-muted:     rgba(56,178,255,0.12);
  --color-info-border:    rgba(56,178,255,0.30);

  /* ─ Interactive States ─ */
  --color-focus-ring: rgba(124,106,255,0.40);

  /* ─ Backward Compat (old tokens → new tokens) ─
     يضمن عمل الكود القديم مع النظام الجديد دون تعديل
     ─────────────────────────────────────────────── */
  --bg:       var(--color-bg);
  --surface:  var(--color-surface-0);
  --surface2: var(--color-surface-1);
  --surface3: var(--color-surface-2);
  --border:   var(--color-border-subtle);
  --border2:  var(--color-border-strong);
  --text:     var(--color-text-primary);
  --text2:    var(--color-text-secondary);
  --text3:    var(--color-text-tertiary);
  --accent:   var(--color-accent);
  --accent2:  var(--purple-600);
  --green:    var(--color-success);
  --green2:   var(--green-600);
  --red:      var(--color-danger);
  --amber:    var(--color-warning);
}

/* ── 3. SEMANTIC TOKENS (Light Mode) ────────────────────────────
   ─────────────────────────────────────────────────────────────── */
[data-theme="light"],
.theme-light-active {
  --color-bg:          var(--gray-50);
  --color-surface-0:   var(--gray-0);
  --color-surface-1:   var(--gray-100);
  --color-surface-2:   var(--gray-200);
  --color-surface-3:   var(--gray-300);
  --color-overlay:     rgba(0,0,0,0.45);

  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary:  var(--gray-400);
  --color-text-inverse:   var(--gray-0);

  --color-border-subtle:  rgba(0,0,0,0.06);
  --color-border-default: rgba(0,0,0,0.10);
  --color-border-strong:  rgba(0,0,0,0.18);

  --color-accent-muted:  rgba(124,106,255,0.10);
  --color-success-muted: rgba(34,184,118,0.10);
  --color-danger-muted:  rgba(220,50,50,0.10);
  --color-warning-muted: rgba(200,120,0,0.10);

  /* Backward compat */
  --bg:       var(--color-bg);
  --surface:  var(--color-surface-0);
  --surface2: var(--color-surface-1);
  --surface3: var(--color-surface-2);
  --border:   var(--color-border-subtle);
  --border2:  var(--color-border-strong);
  --text:     var(--color-text-primary);
  --text2:    var(--color-text-secondary);
  --text3:    var(--color-text-tertiary);
  --green2:   var(--green-700);
}

/* ── 4. TYPOGRAPHY SYSTEM ────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */

/* ─ Base Reset ─ */
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
}

/* ─ Heading Scale (مثل Stripe) ─ */
.t-display {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.t-headline {
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-title-1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.t-title-2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.t-title-3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.t-body-lg {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.t-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.t-body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.t-caption {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}
.t-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.t-mono {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.t-mono-lg {
  font-family: var(--mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.t-mono-xl {
  font-family: var(--mono);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

/* ── 5. COMPONENT TOKENS ─────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */

/* ─ Cards ─ */
.card-base {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.card-base:hover {
  border-color: var(--color-border-strong);
}
.card-elevated {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.card-glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card-accent {
  background: var(--color-accent-muted);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-xl);
}

/* ─ Buttons ─ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--sans);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sizes */
.btn-xs { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
.btn-sm { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); height: 28px; }
.btn-md { font-size: var(--text-base); padding: var(--space-2) var(--space-4); height: 36px; }
.btn-lg { font-size: var(--text-md); padding: var(--space-3) var(--space-6); height: 44px; }
.btn-xl { font-size: var(--text-lg); padding: var(--space-4) var(--space-8); height: 52px; border-radius: var(--radius-xl); }

/* Variants */
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}
.btn-secondary:hover { background: var(--color-surface-3); border-color: var(--color-border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text-primary); }

.btn-danger {
  background: var(--color-danger-muted);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}
.btn-danger:hover { background: var(--color-danger); color: #fff; }

.btn-success {
  background: var(--color-success-muted);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

/* ─ Inputs ─ */
.input-base {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  outline: none;
  width: 100%;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.input-base::placeholder { color: var(--color-text-tertiary); }
.input-base:hover  { border-color: var(--color-border-strong); }
.input-base:focus  {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ─ Badges / Pills ─ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.badge-accent  { background: var(--color-accent-muted);  color: var(--color-accent);  border: 1px solid var(--color-accent-border); }
.badge-success { background: var(--color-success-muted); color: var(--color-success); border: 1px solid var(--color-success-border); }
.badge-danger  { background: var(--color-danger-muted);  color: var(--color-danger);  border: 1px solid var(--color-danger-border); }
.badge-warning { background: var(--color-warning-muted); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.badge-info    { background: var(--color-info-muted);    color: var(--color-info);    border: 1px solid var(--color-info-border); }
.badge-neutral { background: var(--color-surface-2);     color: var(--color-text-secondary); border: 1px solid var(--color-border-default); }

/* ─ Dividers ─ */
.divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-4) 0;
}
.divider-strong {
  height: 1px;
  background: var(--color-border-default);
}

/* ─ Focus Ring ─ */
.focus-ring:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── 6. SPACING UTILITIES ────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
.p-1 { padding: var(--space-1); }   .p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }   .p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }   .p-6 { padding: var(--space-6); }
.px-2 { padding-inline: var(--space-2); }  .px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }  .px-6 { padding-inline: var(--space-6); }
.py-2 { padding-block: var(--space-2); }   .py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.gap-1 { gap: var(--space-1); }  .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }  .gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }  .gap-8 { gap: var(--space-8); }
.mt-1 { margin-top: var(--space-1); }  .mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }  .mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ── 7. LAYOUT UTILITIES ─────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-1   { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.w-full   { width: 100%; }
.min-w-0  { min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }

/* ── 8. SURFACE UTILITIES ────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full{ border-radius: var(--radius-full); }

.border-default { border: 1px solid var(--color-border-default); }
.border-subtle  { border: 1px solid var(--color-border-subtle); }
.border-accent  { border: 1px solid var(--color-accent-border); }
.border-success { border: 1px solid var(--color-success-border); }
.border-danger  { border: 1px solid var(--color-danger-border); }

.bg-surface-0 { background: var(--color-surface-0); }
.bg-surface-1 { background: var(--color-surface-1); }
.bg-surface-2 { background: var(--color-surface-2); }
.bg-accent    { background: var(--color-accent-muted); }
.bg-success   { background: var(--color-success-muted); }
.bg-danger    { background: var(--color-danger-muted); }
.bg-warning   { background: var(--color-warning-muted); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-accent    { color: var(--color-accent); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
.text-warning   { color: var(--color-warning); }

/* ── 9. ANIMATION UTILITIES ──────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes shimmer   {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animate-fadeIn  { animation: fadeIn  var(--transition-slow) ease both; }
.animate-slideUp { animation: slideUp var(--transition-slow) ease both; }
.animate-scaleIn { animation: scaleIn var(--transition-spring) both; }
.animate-pulse   { animation: pulse 2s ease-in-out infinite; }
.animate-spin    { animation: spin 1s linear infinite; }

/* ── 10. SKELETON / LOADING ──────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-1) 25%,
    var(--color-surface-2) 50%,
    var(--color-surface-1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton-text  { height: 14px; border-radius: var(--radius-sm); }
.skeleton-title { height: 20px; border-radius: var(--radius-sm); }
.skeleton-card  {
  height: 80px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    90deg,
    var(--color-surface-0) 25%,
    var(--color-surface-1) 50%,
    var(--color-surface-0) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── 11. SCROLLBAR GLOBAL ────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--color-border-default) transparent; }

/* ── 12. SELECTION ───────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
::selection {
  background: rgba(124,106,255,0.25);
  color: var(--color-text-primary);
}