/* ===================================================================
   مركز البابا أثناسيوس الرسولي الكنسي
   CSS Design Tokens (css/variables.css)
   Permanent Daytime Papyrus Theme (الوضع الساطع فقط)
   =================================================================== */

:root,
[data-theme="light"] {
  /* ================= Permanent Light Theme (ورق البردي الكنسي الساطع) ================= */
  --bg-primary: #F8F3EA;          /* ورق بردي نهاري دافئ ومريح للعين */
  --bg-secondary: #EFE6D8;        /* بطاقات البردي التراثية */
  --bg-card: #FFFFFF;             /* كروت بيضاء نقية عالية التباين والوضوح */
  --bg-card-hover: #FDF9F2;
  --bg-elevated: #FAF4EB;         /* الأسطح المرتفعة */
  --bg-header: rgba(248, 243, 234, 0.94); /* هيدر المتصفح الشفاف بالوضع الساطع */
  --bg-bottom-nav: rgba(248, 243, 234, 0.96); /* شريط الموبايل السفلي الساطع */

  --border-coptic: #D9CBB8;       /* حواف الخشب والبردي الناعمة المتناسقة */
  --border-coptic-strong: #BAA68E; /* إطارات التركيز النشطة */

  /* Parchment & Text (حبر المخطوطات الكنسية القديم - عالي التباين والقراءة) */
  --parchment: #221711;          /* لون النص الرئيسي (حبر بني داكن وقور ومريح للعين) */
  --parchment-soft: #4A3628;     /* نصوص فرعية واضحة جداً */
  --parchment-muted: #755E4E;    /* نصوص توضيحية */
  --text-inverse: #FFFFFF;
  --text-on-accent: #FFFFFF;     /* نصوص الأزرار العنابية - دائماً بيضاء ناصعة */
  --text-on-gold: #1A110B;       /* نصوص الأزرار الذهبية - داكنة */

  /* Royal Madder (العنابي الكنسي الملكي النهاري) */
  --royal-madder: #80182C;
  --madder-light: #9B1E36;
  --madder-dark: #5A101E;
  --madder-glow: rgba(128, 24, 44, 0.22);

  /* Coptic Sacred Gold (الذهب الأثري الداكن المناسب للخلفيات الساطعة) */
  --coptic-gold: #966E14;        /* درجة ذهب غنية تحقق أعلى تباين لوني مع الأبيض */
  --gold-light: #B58A26;
  --gold-dark: #73530A;
  --gold-glow: rgba(150, 110, 20, 0.2);
  --gold-subtle: rgba(150, 110, 20, 0.1);
  --gold-gradient: linear-gradient(135deg, #7A580F 0%, #B58A26 100%);
  --gold-hairline: rgba(150, 110, 20, 0.2);

  /* Glass Surface Tokens */
  --glass-surface: rgba(255, 255, 255, 0.88);
  --glass-surface-hover: rgba(255, 255, 255, 0.98);
  --glass-blur: blur(14px);
  --glass-blur-lg: blur(24px) saturate(180%);
  --glass-border: 1.5px solid rgba(150, 110, 20, 0.22);
  --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.9);

  /* Apple HIG & UI/UX Pro Max Specular & Radiant Tokens (Light Mode) */
  --specular-rim: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.85);
  --specular-rim-gold: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.95);
  --specular-rim-subtle: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  --gold-liquid: linear-gradient(135deg, #7A580F 0%, #B58A26 48%, #855E0E 100%);
  --gold-button-gradient: linear-gradient(180deg, #C2962C 0%, #A3791B 60%, #876110 100%);
  --gold-button-hover: linear-gradient(180deg, #D4A83D 0%, #B58A26 60%, #996F15 100%);
  --gold-badge-bg: linear-gradient(135deg, rgba(181, 138, 38, 0.16) 0%, rgba(128, 24, 44, 0.08) 100%);
  --hero-mesh-dark: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 75%),
                    radial-gradient(ellipse 55% 50% at 88% 25%, rgba(128, 24, 44, 0.08), transparent 70%),
                    radial-gradient(ellipse 50% 45% at 12% 35%, rgba(184, 137, 46, 0.08), transparent 70%);
  --hero-mesh-light: var(--hero-mesh-dark);

  /* Department Ambient Tints */
  --tint-history: rgba(217, 119, 6, 0.06);
  --tint-theology: rgba(128, 24, 44, 0.06);
  --tint-hymns: rgba(184, 137, 46, 0.06);
  --tint-bible: rgba(46, 125, 50, 0.06);
  --tint-coptic: rgba(165, 34, 58, 0.06);
  --tint-exams: rgba(150, 110, 20, 0.06);

  /* Semantic Feedback */
  --success: #2E7D32;
  --success-glow: rgba(46, 125, 50, 0.25);
  --error: #C62828;
  --error-glow: rgba(198, 40, 40, 0.25);
  --info: #1976D2;

  /* Typography */
  --font-arabic: 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-coptic: 'Noto Sans Coptic', 'Girges', sans-serif;

  /* Font Sizes - Responsive Fluid Scale with Display Headline */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.77rem + 0.25vw, 0.875rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.2vw, 2.375rem);
  --text-hero: clamp(2rem, 6vw + 1rem, 4.25rem);
  --text-display: clamp(2rem, 6vw + 1rem, 4.25rem);

  /* Line Heights */
  --leading-display: 1.25;
  --leading-body: 1.8;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii - Continuous Squircles (Apple HIG) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-squircle: 22px;
  --radius-squircle-lg: 30px;
  --radius-pod: 18px;
  --radius-full: 9999px;

  /* Elevation & Layered Shadows (Soft Warm Sunlight Shadows) */
  --shadow-1: 0 2px 8px rgba(34, 23, 17, 0.06);
  --shadow-2: 0 6px 18px rgba(34, 23, 17, 0.09);
  --shadow-3: 0 12px 32px rgba(34, 23, 17, 0.13);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-gold: 0 0 16px rgba(150, 110, 20, 0.15);
  --shadow-madder: 0 4px 14px rgba(128, 24, 44, 0.2);
  --hero-title-shadow: none;

  /* Motion System Tokens - Spring Physics */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 500ms;
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  --transition-spring: 350ms var(--ease-spring);
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout Constants */
  --header-height: 64px;
  --bottom-nav-height: 68px;
  --container-max-width: 1200px;
  --reading-max-width: 68ch;
}

@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;
  }
}