/**
 * ═══════════════════════════════════════════════════════════════════════════
 * CREATIVE CATHOLIC DESIGN SYSTEM
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * "For where two or three gather in my name, there am I with them."
 * - Matthew 18:20
 *
 * Ancient Biblical Manuscript Aesthetic
 *
 * This design system embodies the sacred beauty of ancient manuscripts
 * and illuminated texts, bringing together:
 * - Rich gold gradients reminiscent of golden illuminations
 * - Deep brown backgrounds like aged parchment
 * - Elegant serif typography (Cinzel & Cormorant Garamond)
 * - Ornamental borders and decorative flourishes
 * - Sacred reverence through visual design
 *
 * Usage: Import this file in all Creative Catholic ecosystem apps:
 * - Nov3na (nov3na.com) - Novena prayer app
 * - Rekindle The Fire (rekindlethefire.net) - Adult Men's program
 * - Saints Calendar - Catholic saints app
 * - Nonstop Novenas - Discord Group
 * - YouPray (youpray.org) - Prayer app
 * - Unlock Faith (unlockfaith.com) - Podcast/News/Video Series
 * - More Saints (moresaints.org) - Youth program
 * - Creative Catholic (creativecatholic.org) - Organization
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY - Sacred Fonts
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR PALETTE - Ancient Manuscript Colors
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ Primary Ancient Manuscript Colors ═══ */
  --cc-manuscript-brown-dark: #2a1810;
  --cc-manuscript-brown-mid: #4a2c1a;
  --cc-manuscript-brown-light: #6b4423;
  --cc-parchment-cream: #f8f5e8;
  --cc-parchment-aged: #e8e0c9;

  /* ═══ Sacred Gold Palette ═══ */
  --cc-gold-primary: #d4af37;
  --cc-gold-light: #f4e5a7;
  --cc-gold-bright: #ffd700;
  --cc-gold-dark: #b8941f;
  --cc-gold-glow: rgba(212, 175, 55, 0.3);

  /* ═══ Liturgical Colors ═══ */
  --cc-liturgical-white: #ffffff;
  --cc-liturgical-red: #dc143c;
  --cc-liturgical-green: #228b22;
  --cc-liturgical-purple: #800080;
  --cc-liturgical-rose: #ff007f;
  --cc-liturgical-black: #000000;

  /* ═══ Light Mode (Default) ═══ */
  --cc-bg-primary: #f8f8f8;
  --cc-bg-secondary: #ffffff;
  --cc-bg-tertiary: #f8f5e8;
  --cc-text-primary: #333333;
  --cc-text-secondary: #666666;
  --cc-text-tertiary: #999999;
  --cc-border-primary: #e0ddd5;
  --cc-border-secondary: #ccc8ba;

  /* ═══ Dark Mode Variables ═══ */
  --cc-dark-bg-primary: #1a1410;
  --cc-dark-bg-secondary: #2a1f18;
  --cc-dark-bg-tertiary: #3a2d20;
  --cc-dark-text-primary: #e8e0c9;
  --cc-dark-text-secondary: #c4b8a0;
  --cc-dark-text-tertiary: #9a8d75;
  --cc-dark-border-primary: #4a3d30;
  --cc-dark-border-secondary: #5a4d40;

  /* ═══ Gradient Definitions ═══ */
  --cc-gradient-manuscript: linear-gradient(135deg, #2a1810 0%, #4a2c1a 50%, #2a1810 100%);
  --cc-gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4e5a7 50%, #d4af37 100%);
  --cc-gradient-gold-subtle: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(244, 229, 167, 0.15) 100%);
  --cc-gradient-parchment: linear-gradient(180deg, #f8f5e8 0%, #e8e0c9 100%);

  /* ═══ Shadow System ═══ */
  --cc-shadow-subtle: 0 2px 4px rgba(42, 24, 16, 0.08);
  --cc-shadow-medium: 0 4px 8px rgba(42, 24, 16, 0.12);
  --cc-shadow-strong: 0 8px 16px rgba(42, 24, 16, 0.16);
  --cc-shadow-dramatic: 0 12px 24px rgba(42, 24, 16, 0.24);
  --cc-shadow-gold: 0 0 12px rgba(212, 175, 55, 0.3);
  --cc-shadow-gold-text: 0 2px 4px rgba(212, 175, 55, 0.5);
  --cc-shadow-inset-gold: inset 0 1px 0 rgba(212, 175, 55, 0.3);

  /* ═══ Spacing System ═══ */
  --cc-space-xs: 4px;
  --cc-space-sm: 8px;
  --cc-space-md: 12px;
  --cc-space-lg: 16px;
  --cc-space-xl: 20px;
  --cc-space-2xl: 24px;
  --cc-space-3xl: 32px;
  --cc-space-4xl: 48px;

  /* ═══ Border Radius ═══ */
  --cc-radius-sm: 4px;
  --cc-radius-md: 8px;
  --cc-radius-lg: 12px;
  --cc-radius-xl: 16px;
  --cc-radius-full: 9999px;

  /* ═══ Typography Scale ═══ */
  --cc-font-xs: 10px;
  --cc-font-sm: 12px;
  --cc-font-base: 14px;
  --cc-font-md: 16px;
  --cc-font-lg: 18px;
  --cc-font-xl: 20px;
  --cc-font-2xl: 24px;
  --cc-font-3xl: 30px;
  --cc-font-4xl: 36px;
  --cc-font-5xl: 48px;

  /* ═══ Font Families ═══ */
  --cc-font-display: 'Cinzel', serif;
  --cc-font-body: 'Cormorant Garamond', serif;
  --cc-font-system: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* ═══ Transitions ═══ */
  --cc-transition-fast: 0.15s ease;
  --cc-transition-base: 0.3s ease;
  --cc-transition-slow: 0.5s ease;
  --cc-transition-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

body.dark-mode {
  --cc-bg-primary: var(--cc-dark-bg-primary);
  --cc-bg-secondary: var(--cc-dark-bg-secondary);
  --cc-bg-tertiary: var(--cc-dark-bg-tertiary);
  --cc-text-primary: var(--cc-dark-text-primary);
  --cc-text-secondary: var(--cc-dark-text-secondary);
  --cc-text-tertiary: var(--cc-dark-text-tertiary);
  --cc-border-primary: var(--cc-dark-border-primary);
  --cc-border-secondary: var(--cc-dark-border-secondary);

  --cc-shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.3);
  --cc-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
  --cc-shadow-strong: 0 8px 16px rgba(0, 0, 0, 0.5);
  --cc-shadow-dramatic: 0 12px 24px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES - Ancient Manuscript Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ Gold Text with Shadow ═══ */
.cc-text-gold {
  color: var(--cc-gold-primary);
  text-shadow: var(--cc-shadow-gold-text);
}

.cc-text-gold-gradient {
  background: var(--cc-gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: var(--cc-shadow-gold-text);
}

/* ═══ Manuscript Backgrounds ═══ */
.cc-bg-manuscript {
  background: var(--cc-gradient-manuscript);
}

.cc-bg-parchment {
  background: var(--cc-bg-tertiary);
}

.cc-bg-gold-subtle {
  background: var(--cc-gradient-gold-subtle);
  backdrop-filter: blur(10px);
}

/* ═══ Decorative Borders ═══ */
.cc-border-gold {
  border: 3px solid var(--cc-gold-primary);
  box-shadow: var(--cc-shadow-inset-gold);
}

.cc-border-gold-top {
  border-top: 3px solid var(--cc-gold-primary);
  box-shadow: inset 0 2px 0 rgba(212, 175, 55, 0.3);
}

.cc-border-gold-bottom {
  border-bottom: 3px solid var(--cc-gold-primary);
  box-shadow: inset 0 -2px 0 rgba(212, 175, 55, 0.3);
}

/* ═══ Ornamental Decorations ═══ */
.cc-ornament {
  position: relative;
}

.cc-ornament::before,
.cc-ornament::after {
  content: '';
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cc-gold-primary) 20%,
    var(--cc-gold-light) 50%,
    var(--cc-gold-primary) 80%,
    transparent 100%);
}

.cc-ornament::before {
  top: 0;
  left: 0;
  right: 0;
}

.cc-ornament::after {
  bottom: 0;
  left: 0;
  right: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON SYSTEM - Sacred Illuminated Style
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ Base Button ═══ */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-sm);
  padding: var(--cc-space-md) var(--cc-space-xl);
  font-family: var(--cc-font-body);
  font-size: var(--cc-font-md);
  font-weight: 600;
  border-radius: var(--cc-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--cc-transition-base);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.cc-btn:hover {
  transform: translateY(-2px);
}

.cc-btn:active {
  transform: translateY(0);
}

.cc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ═══ Primary Button (Gold Illuminated) ═══ */
.cc-btn-primary {
  background: var(--cc-gradient-gold-subtle);
  color: var(--cc-gold-primary);
  border: 2px solid rgba(212, 175, 55, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: var(--cc-shadow-subtle);
}

.cc-btn-primary:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(244, 229, 167, 0.25) 100%);
  border-color: var(--cc-gold-primary);
  box-shadow: var(--cc-shadow-gold);
}

body.dark-mode .cc-btn-primary {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(244, 229, 167, 0.1) 100%);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--cc-gold-light);
}

body.dark-mode .cc-btn-primary:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(244, 229, 167, 0.2) 100%);
  border-color: var(--cc-gold-primary);
}

/* ═══ Secondary Button (Manuscript Brown) ═══ */
.cc-btn-secondary {
  background: var(--cc-gradient-manuscript);
  color: var(--cc-gold-light);
  border: 2px solid var(--cc-gold-dark);
  box-shadow: var(--cc-shadow-medium);
}

.cc-btn-secondary:hover {
  border-color: var(--cc-gold-primary);
  box-shadow: var(--cc-shadow-gold);
}

/* ═══ Success Button (Liturgical Green) ═══ */
.cc-btn-success {
  background: linear-gradient(135deg, #228b22 0%, #32cd32 100%);
  color: white;
  border: 2px solid #1a6b1a;
  box-shadow: var(--cc-shadow-medium);
}

.cc-btn-success:hover {
  background: linear-gradient(135deg, #32cd32 0%, #228b22 100%);
  box-shadow: var(--cc-shadow-strong);
}

/* ═══ Danger Button (Liturgical Red) ═══ */
.cc-btn-danger {
  background: linear-gradient(135deg, #dc143c 0%, #ff6b6b 100%);
  color: white;
  border: 2px solid #b81030;
  box-shadow: var(--cc-shadow-medium);
}

.cc-btn-danger:hover {
  background: linear-gradient(135deg, #ff6b6b 0%, #dc143c 100%);
  box-shadow: var(--cc-shadow-strong);
}

/* ═══ Ghost Button (Transparent) ═══ */
.cc-btn-ghost {
  background: transparent;
  color: var(--cc-text-primary);
  border: 2px solid var(--cc-border-primary);
}

.cc-btn-ghost:hover {
  background: var(--cc-bg-tertiary);
  border-color: var(--cc-gold-primary);
  color: var(--cc-gold-primary);
}

/* ═══ Icon Button ═══ */
.cc-btn-icon {
  padding: var(--cc-space-sm);
  border-radius: var(--cc-radius-full);
  width: 40px;
  height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD SYSTEM - Illuminated Panels
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-card {
  background: var(--cc-bg-secondary);
  border: 1px solid var(--cc-border-primary);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-xl);
  box-shadow: var(--cc-shadow-subtle);
  transition: all var(--cc-transition-base);
}

.cc-card:hover {
  box-shadow: var(--cc-shadow-medium);
}

.cc-card-manuscript {
  background: var(--cc-gradient-manuscript);
  border: 3px solid var(--cc-gold-primary);
  color: var(--cc-gold-light);
  box-shadow: var(--cc-shadow-dramatic);
}

.cc-card-parchment {
  background: var(--cc-bg-tertiary);
  border: 2px solid var(--cc-gold-dark);
  position: relative;
}

.cc-card-parchment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cc-gold-primary), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM CHECKBOX - Illuminated Style
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-checkbox-container {
  display: flex;
  align-items: center;
  gap: var(--cc-space-md);
  cursor: pointer;
  user-select: none;
  padding: var(--cc-space-sm);
  border-radius: var(--cc-radius-sm);
  transition: background var(--cc-transition-base);
}

.cc-checkbox-container:hover {
  background: var(--cc-bg-tertiary);
}

.cc-checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.cc-checkbox-custom {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid var(--cc-gold-dark);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-bg-secondary);
  transition: all var(--cc-transition-base);
  flex-shrink: 0;
}

.cc-checkbox-container:hover .cc-checkbox-custom {
  border-color: var(--cc-gold-primary);
  box-shadow: 0 0 8px var(--cc-gold-glow);
}

.cc-checkbox-container input[type="checkbox"]:checked + .cc-checkbox-custom {
  background: var(--cc-gradient-gold);
  border-color: var(--cc-gold-primary);
  box-shadow: var(--cc-shadow-gold);
}

.cc-checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 16px;
  font-weight: bold;
  color: var(--cc-manuscript-brown-dark);
  transition: transform var(--cc-transition-base);
}

.cc-checkbox-container input[type="checkbox"]:checked + .cc-checkbox-custom::after {
  transform: translate(-50%, -50%) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO BOX - Expandable Descriptions
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--cc-radius-full);
  background: var(--cc-gradient-gold-subtle);
  border: 1px solid var(--cc-gold-dark);
  color: var(--cc-gold-primary);
  font-size: var(--cc-font-sm);
  font-weight: bold;
  cursor: pointer;
  transition: all var(--cc-transition-base);
  flex-shrink: 0;
}

.cc-info-icon:hover {
  background: var(--cc-gradient-gold);
  border-color: var(--cc-gold-primary);
  box-shadow: var(--cc-shadow-gold);
  transform: scale(1.1);
}

.cc-info-box {
  margin-top: var(--cc-space-sm);
  padding: var(--cc-space-md);
  background: var(--cc-bg-tertiary);
  border-left: 3px solid var(--cc-gold-primary);
  border-radius: var(--cc-radius-sm);
  font-size: var(--cc-font-sm);
  line-height: 1.6;
  color: var(--cc-text-secondary);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all var(--cc-transition-base);
}

.cc-info-box.expanded {
  max-height: 500px;
  opacity: 1;
  margin-bottom: var(--cc-space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-title {
  font-family: var(--cc-font-display);
  font-size: var(--cc-font-4xl);
  font-weight: 700;
  color: var(--cc-gold-primary);
  text-shadow: var(--cc-shadow-gold-text);
  margin: 0;
}

.cc-heading-1 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-font-3xl);
  font-weight: 700;
  color: var(--cc-text-primary);
  margin: 0 0 var(--cc-space-lg) 0;
}

.cc-heading-2 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-font-2xl);
  font-weight: 600;
  color: var(--cc-text-primary);
  margin: 0 0 var(--cc-space-md) 0;
}

.cc-heading-3 {
  font-family: var(--cc-font-body);
  font-size: var(--cc-font-xl);
  font-weight: 600;
  color: var(--cc-text-primary);
  margin: 0 0 var(--cc-space-sm) 0;
}

.cc-body {
  font-family: var(--cc-font-body);
  font-size: var(--cc-font-md);
  line-height: 1.6;
  color: var(--cc-text-primary);
}

.cc-small {
  font-family: var(--cc-font-body);
  font-size: var(--cc-font-sm);
  color: var(--cc-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING - Ancient Manuscript
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.cc-scrollbar::-webkit-scrollbar-track {
  background: var(--cc-bg-tertiary);
  border-radius: var(--cc-radius-md);
}

.cc-scrollbar::-webkit-scrollbar-thumb {
  background: var(--cc-gradient-gold-subtle);
  border: 2px solid var(--cc-gold-dark);
  border-radius: var(--cc-radius-md);
}

.cc-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--cc-gradient-gold);
  border-color: var(--cc-gold-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATION KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cc-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cc-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cc-goldGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.6);
  }
}

@keyframes cc-shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.cc-animate-fadeIn {
  animation: cc-fadeIn var(--cc-transition-base);
}

.cc-animate-fadeInUp {
  animation: cc-fadeInUp var(--cc-transition-slow);
}

.cc-animate-glow {
  animation: cc-goldGlow 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --cc-font-4xl: 28px;
    --cc-font-3xl: 24px;
    --cc-font-2xl: 20px;
    --cc-space-xl: 16px;
    --cc-space-2xl: 20px;
    --cc-space-3xl: 24px;
    --cc-space-4xl: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END OF CREATIVE CATHOLIC DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */