/* ==========================================================================
   الهوية البصرية الترابية الدافئة لنظام معين (Warm Earth Theme)
   ========================================================================== */

@font-face {
  font-family: 'UthmanTaha';
  src: url('../assets/fonts/uthman_taha.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm Earth Palette (مطابقة 100% لتطبيق الأندرويد) */
  --bg-color: #B38A5F;
  --card-bg: #B38A5F;
  --card-active-bg: #A27448;
  --card-light-bg: #C49E74;
  --card-border: #8A653F;
  --card-active-border: #6B4A2D;
  --card-inner-bg: #BD956C;
  
  /* Typography Colors */
  --text-ayah: #120C07;
  --text-primary: #201610;
  --text-secondary: #4A3525;
  --text-muted: #5C4533;
  --text-light: #FBF8F5;
  
  /* Accent Colors */
  --accent-terracotta: #7C261E;
  --accent-terracotta-dark: #5C1C16;
  --accent-terracotta-light: #9B382F;
  --accent-gold: #D4AF37;
  --accent-gold-variant: #AA820A;
  --accent-green: #2E7D32;
  
  /* Fonts */
  --font-quran: 'UthmanTaha', 'Traditional Arabic', 'Scheherazade New', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Naskh Arabic', sans-serif;
  
  /* Radii & Shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;
  
  --shadow-sm: 0 1px 3px rgba(32, 22, 16, 0.12);
  --shadow-md: 0 4px 10px rgba(32, 22, 16, 0.18);
  --shadow-lg: 0 8px 24px rgba(32, 22, 16, 0.25);
  
  /* Transition Timing */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Animations */
@keyframes equalizer-bounce {
  0%, 100% { height: 6px; }
  50% { height: 26px; }
}

@keyframes pulse-subtle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.92; }
}

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}