/* ===================================
   THEME.CSS - WD-006 Template
   Fonts, CSS Variables, Typography
   =================================== */

/* Font Face Declarations */
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pinyon Script';
  src: url('/assets/fonts/PinyonScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ganthe';
  src: url('/assets/fonts/ganthe.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marcellus';
  src: url('/assets/fonts/Marcellus-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables - Tailwind Compatible */
:root {
  /* Primary Theme Colors */
  --color-primary: #32378C;
  --color-primary-dark: #282D70;
  --color-secondary: #6b7280;
  --color-success: #10b981;
  --color-danger: #D92332;
  --color-warning: #F2CD5E;
  --color-border: #dee2e6;

  /* Background */
  --bg-cream: #FEFCF5;
  --bg-white: #ffffff;
}

/* Typography Base */
.text-primary {
  color: var(--color-primary) !important;
}

.text-playfair,
h3,
h2,
h1 {
  font-family: 'Playfair Display', serif;
  color: var(--color-primary) !important;
}

.judul-cover {
  font-family: 'Ganthe', Sans-serif;
  font-size: 2.5rem !important;
}

#cover-overlay-main .judul-cover {
  color: #ffffff !important;
}

.judul-section {
  font-family: 'Playfair Display', serif;
  font-weight: normal;
}

.text-quote {
  font-family: 'Marcellus', serif;
}

/* Section Fonts */
#section-couple p,
#section-event p,
#section-map p,
#section-gift p,
#section-thanks p,
#section-wishes p,
.chat-bubble p,
.chat-bubble-body p {
  font-family: 'Marcellus', serif;
}

#section-event p,
#section-map p,
#section-gift p,
#section-thanks p,
#section-wishes p,
.chat-bubble-title .chat-bubble-date {
  font-size: 0.9rem !important;
}

.chat-bubble-title .chat-bubble-author {
  font-family: 'Playfair Display', serif;
  color: var(--color-primary);
}

.chat-bubble-title .chat-bubble-date {
  color: var(--color-secondary);
}

.countdown-item span {
  color: var(--color-primary);
}

.countdown-item small {
  color: var(--color-secondary);
}

.modal-title {
  font-family: 'Playfair Display', serif;
  color: var(--color-primary);
}

.modal-body {
  font-family: 'Marcellus', serif;
}

/* Bride Groom Initials */
.initials-display {
  font-family: 'Ganthe', sans-serif;
  font-size: 4rem;
  color: var(--color-primary);
  opacity: 0.15;
  letter-spacing: 0.5rem;
}

/* Utility Classes */
.text-muted {
  color: #6b7280;
}

.bg-white {
  background-color: white;
}

.border {
  border: 1px solid #e5e7eb;
}

/* Z-Index Utilities */
.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-10 {
  z-index: 10;
}