/*
Theme Name: Mohamed Yousef - Chemistry & Physics Tutor
Theme URI: https://mymohamed-yousef.com
Author: Mohamed Yousef
Author URI: https://mymohamed-yousef.com
Description: ثيم احترافي لمدرس الكيمياء والفيزياء محمد يوسف | Professional theme for Chemistry & Physics Tutor Mohamed Yousef. Supports Arabic RTL, bilingual content, online subscriptions, parent monitoring dashboard, and Egyptian payment gateways.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
Tags: rtl-language, arabic, education, e-learning, dark, bilingual, lms
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand Colors */
  --color-primary:       #6C3FC5;
  --color-primary-dark:  #4B2E6F;
  --color-primary-light: #9B6EE8;
  --color-accent:        #D4A017;
  --color-accent-light:  #F0BF3A;
  --color-accent-dark:   #A07812;

  /* Background Layers */
  --bg-deep:    #0A0812;
  --bg-main:    #0D0B1A;
  --bg-card:    #13102A;
  --bg-card-2:  #1A1630;
  --bg-glass:   rgba(108, 63, 197, 0.08);
  --bg-glass-2: rgba(255, 255, 255, 0.04);

  /* Text */
  --text-primary:   #F0EAF8;
  --text-secondary: #B8A8D4;
  --text-muted:     #7B6A9E;
  --text-on-accent: #0D0B1A;

  /* Borders */
  --border-subtle:  rgba(108, 63, 197, 0.2);
  --border-medium:  rgba(108, 63, 197, 0.4);
  --border-accent:  rgba(212, 160, 23, 0.4);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6C3FC5 0%, #9B6EE8 100%);
  --gradient-accent:  linear-gradient(135deg, #D4A017 0%, #F0BF3A 100%);
  --gradient-hero:    linear-gradient(135deg, #0A0812 0%, #1A0A3E 50%, #0D1A3A 100%);
  --gradient-card:    linear-gradient(145deg, #13102A, #1A1630);
  --gradient-glass:   linear-gradient(135deg, rgba(108,63,197,0.15), rgba(155,110,232,0.05));

  /* Shadows */
  --shadow-sm:    0 4px 16px rgba(108, 63, 197, 0.15);
  --shadow-md:    0 8px 32px rgba(108, 63, 197, 0.25);
  --shadow-lg:    0 16px 60px rgba(108, 63, 197, 0.35);
  --shadow-glow:  0 0 40px rgba(108, 63, 197, 0.4);
  --shadow-gold:  0 0 40px rgba(212, 160, 23, 0.3);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --font-ar: 'Tajawal', 'Cairo', sans-serif;
  --font-en: 'Outfit', 'Inter', sans-serif;
  --font-display: 'Playfair Display', serif;

  /* Sizes */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Z-index */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;
  --z-toast:    500;
  --z-overlay:  600;
}

/* ============================================================
   GLOBAL UTILITY CLASSES (used across templates)
   ============================================================ */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.btn-full { width: 100%; justify-content: center; }
.btn-xl   { font-size: 1.1rem; padding: var(--space-4) var(--space-8); }