/* ===================================
   نظام الثيمات المتقدم (Advanced Theme System)
   باستخدام HSL Color Space و CSS Variables
   =================================== */

/* ===================================
   DARK MODE - Theme (Default)
   =================================== */
:root,
:root[data-theme="warm-mobile"] {
  --color-primary: hsl(12, 100%, 56%);
  --color-primary-light: hsl(12, 100%, 66%);
  --color-primary-dark: hsl(12, 100%, 46%);

  --color-secondary: hsl(11, 100%, 60%);
  --color-secondary-light: hsl(11, 100%, 70%);
  --color-secondary-dark: hsl(11, 100%, 50%);

  --color-accent: hsl(260, 60%, 55%);
  --color-accent-light: hsl(260, 60%, 68%);
  --color-accent-dark: hsl(260, 60%, 42%);

  --color-bg: hsl(20, 100%, 98%);
  --color-bg-alt: hsl(20, 100%, 96%);
  --color-surface: hsl(25, 100%, 99%);
  --color-surface-light: hsl(20, 100%, 100%);
  --color-surface-lighter: hsl(20, 100%, 100%);

  --color-text: hsl(0, 0%, 15%);
  --color-text-muted: hsl(0, 0%, 45%);
  --color-text-dark: hsl(0, 0%, 10%);

  --color-success: hsl(140, 70%, 50%);
  --color-error: hsl(355, 100%, 50%);
  --color-warning: hsl(38, 92%, 50%);
  --color-info: hsl(210, 100%, 55%);

  --glass-bg: hsla(0, 0%, 100%, 0.8);
  --glass-bg-hover: hsla(0, 0%, 100%, 0.95);
  --glass-border: hsla(12, 100%, 56%, 0.2);
  --glass-border-hover: hsla(12, 100%, 56%, 0.4);

  --gradient-primary: linear-gradient(135deg, hsl(11, 100%, 60%), hsl(12, 100%, 50%));
  --gradient-accent: linear-gradient(135deg, hsl(260, 60%, 55%), hsl(12, 100%, 56%));
}

/* ===================================
   Theme Switcher Component
   =================================== */

/* ===================================
   تحديثات الخلفية
   =================================== */

html::before {
  background: linear-gradient(135deg, #FFF0E8 0%, #FFF9F5 50%, #FFF0E8 100%);
  background-size: 400% 400%;
}

h1,
h2,
h3 {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* تحسين الأداء: الانتقالات محددة وليست شاملة */
html {
  transition: background-color 0.3s ease;
}

body,
.glass-card,
.btn,
.tool-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}