/* ============================================================
   참사랑 거울 육아 (가정연합 편) — Heavenly Violet & Gold Design System
   ============================================================ */

@import "../style.css";

:root {
  --primary: #5A2C87; /* Deep Heavenly Violet */
  --primary-dim: rgba(90, 44, 135, 0.12);
  --primary-glow: rgba(90, 44, 135, 0.3);
  --secondary: #D4AF37; /* Champagne Gold */
  --secondary-dim: rgba(212, 175, 55, 0.15);
  --accent: #E58C8A; /* Rose Gold / Warm Pink */
  --accent-dim: rgba(229, 140, 138, 0.15);
  --peach: #FFF0D4; /* Soft Ivory Peach */
  --baby-blue: #D5E2EC;
  --soft-yellow: #FFF9E6;

  --bg-main: #FAF8FD; /* Soft Heavenly Lavender White */
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5EFFF;
  --bg-section: #F3EBFC;

  --glass-border-hover: rgba(90, 44, 135, 0.25);
  --shadow-card-hover: 0 8px 40px rgba(90, 44, 135, 0.1);
}

/* Custom Overrides for FFWPU Theme */
.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, #8E44AD 50%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-insta {
  background: linear-gradient(45deg, #5A2C87 0%, #8E44AD 50%, #D4AF37 100%) !important;
  color: #fff;
  border: none;
  font-weight: 700;
}

/* Off-screen capture area for FFWPU theme */
#captureArea {
  background: #F5EFFF !important;
}

.capture-card {
  box-shadow: 0 40px 100px rgba(90, 44, 135, 0.15) !important;
}

.capture-tags span {
  background: rgba(90, 44, 135, 0.1) !important;
}

.capture-footer {
  color: var(--primary) !important;
}

/* Additional FFWPU-specific visual touches */
.hero__badge {
  background: var(--primary-dim) !important;
  border: 1px solid rgba(90, 44, 135, 0.15) !important;
  color: var(--primary) !important;
}

.section-tag {
  background: var(--primary-dim) !important;
  color: var(--primary) !important;
}

.step-num {
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.stat-pill__num {
  color: var(--primary) !important;
}

/* Golden Providential Visual Enhancement */
.card, .dim-card, .dimension-card, .article-card, .tech-card, 
.btn-unlock-fact, .fact-bomb-container, .preview-card, 
.selector-box, .legal-section, .faq-item, .mission-box,
.photocard, .carousel-card {
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 8px 32px rgba(90, 44, 135, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.card:hover, .dim-card:hover, .dimension-card:hover, .article-card:hover, 
.preview-card:hover, .carousel-card:hover {
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 12px 40px rgba(90, 44, 135, 0.15) !important;
  transform: translateY(-4px);
}

.btn--primary, .nav__cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(90, 44, 135, 0.2) !important;
}

.btn--primary:hover, .nav__cta:hover {
  border-color: rgba(212, 175, 55, 0.9) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
  transform: translateY(-2px);
}

/* Accessibility (WCAG) utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 8px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}