@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');

/**
 * MAIDAN AL-MUNASABAT — CENTRAL DESIGN TOKENS
 * ميدان المناسبات — منظومة التصميم المركزية الموحدة
 * 
 * Version: 1.0.0 (Foundation)
 * Tag: MAIDAN_WEB_FOUNDATION_VERSION: 1.0.0
 * Source of Truth: D:\maidan\lib\core\theme\maidan_colors.dart
 * Architecture: Zero-Dependency, Pure CSS Custom Properties, RTL Logical Foundation
 */

:root {
  /* ==========================================================================
     1. BRAND COLORS (ألوان الهوية الرسمية المستخرجة من التطبيق)
     ========================================================================== */
  --m-purple-primary: #4B176C;       /* Flutter: MaidanColors.royalPurple (0xFF4B176C) */
  --m-purple-deep: #341047;
  --m-purple-dark: #2A1038;
  --m-purple-medium: #642584;
  --m-purple-soft: #7A3B99;
  --m-purple-tint: #F0E7F5;
  --m-purple-subtle: #F8F3FA;

  --m-gold-accent: #C89A3C;          /* Flutter: MaidanColors.royalGold (0xFFC89A3C) */
  --m-gold-polished: #D8A232;
  --m-gold-deep: #9F7324;
  --m-gold-medium: #B9862D;
  --m-gold-light: #F6ECD7;
  --m-gold-subtle: #FBF8F3;

  /* ==========================================================================
     2. LIGHT THEME SURFACES & TEXT (الوضع النهاري الملكي)
     ========================================================================== */
  --m-bg-page: #FFFFFF;              /* Flutter: MaidanColors.background */
  --m-bg-surface: #FFFFFF;
  --m-bg-surface-secondary: #F5F5F5; /* Flutter: MaidanColors.secondaryBackground */
  --m-bg-surface-soft: #F7F4F9;      /* Flutter: MaidanColors.brandSoft */
  --m-bg-surface-selected: #F9F4FC;  /* Flutter: MaidanColors.brandSelected */
  --m-bg-surface-ivory: #FBF8F3;

  --m-text-primary: #212121;         /* Flutter: MaidanColors.text */
  --m-text-muted: #6B6070;           /* Flutter: MaidanColors.mutedText */
  --m-text-helper: #746A78;          /* Flutter: MaidanColors.helperText */
  --m-on-primary: #FFFFFF;           /* Flutter: MaidanColors.onPrimary */
  --m-on-primary-muted: #EDE5F2;     /* Flutter: MaidanColors.onPrimaryMuted */

  --m-border: #E7DFEA;               /* Flutter: MaidanColors.border */
  --m-border-subtle: rgba(231, 223, 234, 0.6);
  --m-border-strong: #DBD0DF;

  /* ==========================================================================
     3. SEMANTIC STATE COLORS (الحالات الوظيفية المعتمدة)
     ========================================================================== */
  --m-state-success: #157347;         /* Flutter: MaidanColors.success */
  --m-state-success-surface: #E9F7EF; /* Flutter: MaidanColors.successSurface */
  --m-state-verified: #16825D;        /* Flutter: MaidanColors.verified */
  --m-state-warning: #9A6500;         /* Flutter: MaidanColors.warning */
  --m-state-warning-surface: #FFF5E4; /* Flutter: MaidanColors.warningSurface */
  --m-state-destructive: #B42318;     /* Flutter: MaidanColors.destructive */
  --m-state-destructive-surface: #FFEBEE;
  --m-state-danger-action: #F44336;   /* Flutter: MaidanColors.dangerAction */

  /* ==========================================================================
     4. TYPOGRAPHY SCALE (مقياس الطباعة والخطوط العربي المتجاوب)
     ========================================================================== */
  --m-font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --m-font-serif: "Amiri", "Traditional Arabic", "Scheherazade New", serif;

  --m-font-h1: clamp(2.2rem, 4.5vw, 3.6rem);
  --m-font-h2: clamp(1.75rem, 3vw, 2.4rem);
  --m-font-h3: clamp(1.25rem, 2vw, 1.5rem);
  --m-font-h4: clamp(1.1rem, 1.5vw, 1.25rem);
  --m-font-body: 1rem;
  --m-font-small: 0.875rem;
  --m-font-caption: 0.75rem;

  --m-line-height-heading: 1.3;
  --m-line-height-body: 1.75;
  --m-line-height-tight: 1.4;

  --m-font-weight-regular: 400;
  --m-font-weight-medium: 500;
  --m-font-weight-semibold: 600;
  --m-font-weight-bold: 700;
  --m-font-weight-black: 800;

  /* ==========================================================================
     5. SPACING SCALE (مقياس المسافات والتباعد)
     ========================================================================== */
  --m-space-xs: 4px;
  --m-space-sm: 8px;
  --m-space-md: 16px;
  --m-space-lg: 24px;
  --m-space-xl: 32px;
  --m-space-2xl: 48px;
  --m-space-3xl: 64px;
  --m-space-4xl: 96px;

  /* ==========================================================================
     6. RADII SCALE (مقياس زوايا الانحناء)
     ========================================================================== */
  --m-radius-xs: 4px;
  --m-radius-sm: 8px;
  --m-radius-md: 16px;
  --m-radius-lg: 24px;
  --m-radius-xl: 32px;
  --m-radius-full: 9999px;

  /* ==========================================================================
     7. ELEVATION & SHADOWS (الظلال والتدرجات)
     ========================================================================== */
  --m-shadow-subtle: 0 2px 8px rgba(75, 23, 108, 0.04);
  --m-shadow-soft: 0 8px 24px rgba(75, 23, 108, 0.07);
  --m-shadow-medium: 0 16px 40px rgba(75, 23, 108, 0.10);
  --m-shadow-strong: 0 24px 64px rgba(75, 23, 108, 0.15);

  /* ==========================================================================
     8. LAYOUT & CONTAINERS (أبعاد الحاويات وتنسيق الصفحات)
     ========================================================================== */
  --m-container-max: 1240px;
  --m-container-narrow: 840px;
  --m-container-padding: clamp(16px, 4vw, 32px);
  --m-section-gap: clamp(48px, 6vw, 88px);

  /* ==========================================================================
     9. RESPONSIVE BREAKPOINT TOKENS (نقاط التحول المتجاوبة)
     ========================================================================== */
  --m-bp-mobile-sm: 360px;
  --m-bp-mobile: 480px;
  --m-bp-tablet: 768px;
  --m-bp-laptop: 1024px;
  --m-bp-desktop: 1280px;
  --m-bp-wide: 1440px;

  /* ==========================================================================
     10. ACCESSIBILITY & INTERACTION TOKENS (إمكانية الوصول والتفاعل)
     ========================================================================== */
  --m-focus-ring: 0 0 0 3px rgba(200, 154, 60, 0.45);
  --m-touch-min-target: 44px;
  --m-transition-fast: 150ms ease;
  --m-transition-normal: 250ms ease;
  --m-transition-slow: 350ms ease;
  --m-z-header: 1000;
  --m-z-drawer: 2000;
  --m-z-modal: 3000;
}

/* ==========================================================================
   11. FOCUS-VISIBLE PRIMITIVE RULE (قاعدة التركيز المحسنة لإمكانية الوصول)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--m-gold-accent) !important;
  outline-offset: 2px !important;
  box-shadow: var(--m-focus-ring) !important;
}

/* ==========================================================================
   12. DARK THEME TOKENS (الوضع الليلي الملكي — باذنجاني عميق بدون أسود تام)
   ========================================================================== */
[data-theme="dark"] {
  --m-bg-page: #150722;              /* Deep royal eggplant - NOT pure black */
  --m-bg-surface: #1E0C30;
  --m-bg-surface-secondary: #230E36;
  --m-bg-surface-soft: #281140;
  --m-bg-surface-selected: #31154E;
  --m-bg-surface-ivory: #1E0C30;

  --m-text-primary: #F7F3FA;
  --m-text-muted: #B8A9C4;
  --m-text-helper: #9C8CA8;
  --m-on-primary: #FFFFFF;
  --m-on-primary-muted: #D8CCE0;

  --m-border: #3D1C5C;
  --m-border-subtle: rgba(61, 28, 92, 0.6);
  --m-border-strong: #54277E;

  --m-gold-accent: #F4CF68;          /* Luminous gold for high contrast in dark mode */
  --m-gold-polished: #E5BD50;
  --m-purple-primary: #8822CE;       /* Luminous purple for dark mode highlights */

  --m-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
  --m-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.4);
  --m-shadow-medium: 0 16px 40px rgba(0, 0, 0, 0.5);
  --m-shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* OS Dark Mode Fallback when no explicit data-theme attribute is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-bg-page: #150722;
    --m-bg-surface: #1E0C30;
    --m-bg-surface-secondary: #230E36;
    --m-bg-surface-soft: #281140;
    --m-bg-surface-selected: #31154E;
    --m-bg-surface-ivory: #1E0C30;

    --m-text-primary: #F7F3FA;
    --m-text-muted: #B8A9C4;
    --m-text-helper: #9C8CA8;
    --m-on-primary: #FFFFFF;
    --m-on-primary-muted: #D8CCE0;

    --m-border: #3D1C5C;
    --m-border-subtle: rgba(61, 28, 92, 0.6);
    --m-border-strong: #54277E;

    --m-gold-accent: #F4CF68;
    --m-gold-polished: #E5BD50;
    --m-purple-primary: #8822CE;

    --m-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
    --m-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.4);
    --m-shadow-medium: 0 16px 40px rgba(0, 0, 0, 0.5);
    --m-shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.6);
  }
}

/* ==========================================================================
   13. ACCESSIBILITY: REDUCED MOTION (تقليل الحركة للمستخدمين الحساسين)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}