/**
 * Lumiere — Global Design System
 * ملف أساس التصميم — مطابق تماماً لـ React (src/styles/theme.css)
 * يُحمَّل قبل كل ملفات التصميم الأخرى ليكون المصدر الوحيد للـ tokens.
 */

:root {
  --font-size: 16px;
  --background: #F8F6F3;
  --foreground: #1E1E1E;
  --card: #FFFFFF;
  --card-foreground: #1E1E1E;
  --popover: #FFFFFF;
  --popover-foreground: #1E1E1E;
  --primary: #B88A44;
  --primary-foreground: #FFFFFF;
  --secondary: #E9DDD0;
  --secondary-foreground: #1E1E1E;
  --muted: #F0EBE4;
  --muted-foreground: #8B7E74;
  --accent: #D4A96A;
  --accent-foreground: #1E1E1E;
  --destructive: #C0392B;
  --destructive-foreground: #FFFFFF;
  --border: #ECE8E1;
  --input: transparent;
  --input-background: #F5F2EE;
  --switch-background: #D4C4B4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #B88A44;
  --chart-1: #B88A44;
  --chart-2: #D4A96A;
  --chart-3: #8B6932;
  --chart-4: #E9DDD0;
  --chart-5: #C9A87A;
  --radius: 0.875rem;

  /* مقاييس الخط — مطابقة لسلّم Tailwind v4 المستخدم في React */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* أسماء بديلة للتوافق مع ملفات lm-* القديمة */
  --lm-bg: var(--background);
  --lm-fg: var(--foreground);
  --lm-primary: var(--primary);
  --lm-primary-hover: #A8844A;
  --lm-secondary: var(--secondary);
  --lm-muted: var(--muted-foreground);
  --lm-border: var(--border);
  --lm-accent: var(--accent);
  --lm-card: var(--card);
  --lm-radius: var(--radius);
  --lm-max: 1280px;
}

.dark {
  --background: #1A1714;
  --foreground: #F5F0EA;
  --card: #211E1A;
  --card-foreground: #F5F0EA;
  --popover: #211E1A;
  --popover-foreground: #F5F0EA;
  --primary: #C9A87A;
  --primary-foreground: #1A1714;
  --secondary: #2E2720;
  --secondary-foreground: #F5F0EA;
  --muted: #2A2420;
  --muted-foreground: #9C8C7C;
  --accent: #D4A96A;
  --accent-foreground: #1A1714;
  --destructive: #E74C3C;
  --destructive-foreground: #FFFFFF;
  --border: #2E2720;
  --input: #2E2720;
  --ring: #C9A87A;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
  direction: rtl;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Tajawal', system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  direction: rtl;
  overflow-x: hidden;
  max-width: 100%;
}

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Scheherazade New', 'Amiri', serif;
  font-weight: var(--font-weight-medium);
  margin: 0;
}

h1 { font-size: var(--text-4xl); line-height: 1.3; }
h2 { font-size: var(--text-3xl); line-height: 1.35; }
h3 { font-size: var(--text-xl); line-height: 1.4; }
h4 { font-size: var(--text-lg); line-height: 1.45; }

label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}

button {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  font-family: 'Tajawal', system-ui, sans-serif;
  text-align: right;
}

a { color: inherit; }

[dir="rtl"] .icon-start { right: 0.875rem; left: auto; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* ——————————————————— Keyframes (مطابقة لـ React) ——————————————————— */
@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  100% { transform: scale(1.22) translate(-4%, -3%); }
}
@keyframes kenBurns2 {
  0%   { transform: scale(1.22) translate(-4%, -3%); }
  100% { transform: scale(1.0) translate(3%, 2%); }
}
@keyframes kenBurns3 {
  0%   { transform: scale(1.05) translate(2%, 1%); }
  100% { transform: scale(1.2) translate(-3%, -4%); }
}
@keyframes aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-18px) rotate(3deg); }
  66% { transform: translateY(-8px) rotate(-2deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.animate-aurora { background-size: 300% 300%; animation: aurora 12s ease infinite; }
.animate-float { animation: float 8s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.skeleton {
  background: linear-gradient(90deg, var(--muted) 0%, var(--secondary) 50%, var(--muted) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* ——————————————————— Utility surfaces ——————————————————— */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.glass-dark {
  background: rgba(26, 23, 20, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.gold-gradient {
  background: linear-gradient(135deg, #B88A44 0%, #D4A96A 50%, #B88A44 100%);
}
.text-gold-gradient {
  background: linear-gradient(135deg, #B88A44, #D4A96A, #8B6932);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.card-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(184, 138, 68, 0.15), 0 8px 24px rgba(0,0,0,0.08);
}
.btn-primary {
  background: linear-gradient(135deg, #B88A44, #C9A87A);
  color: white;
  border: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(184, 138, 68, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(184, 138, 68, 0.4);
}
.btn-primary:active { transform: translateY(0); }

.input-field {
  background: var(--input-background);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  color: var(--foreground);
}
.input-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(184, 138, 68, 0.12);
}
.input-field::placeholder { color: var(--muted-foreground); }

/* حاوية مشتركة */
.lm-container {
  width: 100%;
  max-width: var(--lm-max);
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}