/**
 * BABY NAME TOURNAMENT THEME - Light, Soft Styling
 * =================================================
 *
 * A light, baby-friendly theme for baby name tournaments:
 * - Soft pastel colors
 * - Light backgrounds
 * - Gentle, welcoming feel
 * - Clean typography
 */

/* ======================
   BABY THEME VARIABLES
   ====================== */

.baby-theme {
  /* Light base colors */
  --baby-bg: #fefbf6;
  --baby-bg-secondary: #fff8f0;
  --baby-bg-tertiary: #ffffff;
  --baby-text: #2d3748;
  --baby-text-secondary: #4a5568;
  --baby-text-muted: #718096;

  /* Soft accent colors */
  --baby-pink: #f687b3;
  --baby-pink-light: #fed7e2;
  --baby-pink-hover: #ed64a6;
  --baby-blue: #63b3ed;
  --baby-blue-light: #bee3f8;
  --baby-purple: #b794f4;
  --baby-purple-light: #e9d8fd;

  /* Gradients and accents */
  --baby-accent: linear-gradient(135deg, #f687b3, #b794f4);
  --baby-accent-glow: rgba(246, 135, 179, 0.25);

  /* Borders and cards */
  --baby-border: rgba(183, 148, 244, 0.3);
  --baby-card-bg: rgba(255, 255, 255, 0.9);
  --baby-card-border: rgba(246, 135, 179, 0.2);

  /* Status colors */
  --baby-success: #48bb78;
  --baby-success-bg: rgba(72, 187, 120, 0.15);
  --baby-winner-bg: linear-gradient(135deg, #fed7e2, #e9d8fd);
  --baby-winner-border: rgba(246, 135, 179, 0.4);
}

/* ======================
   BABY THEME BASE
   ====================== */

.baby-theme {
  background: linear-gradient(
    to bottom,
    var(--baby-bg),
    var(--baby-bg-secondary),
    var(--baby-bg)
  );
  color: var(--baby-text);
  min-height: 100vh;
}

/* ======================
   BABY CARDS
   ====================== */

.baby-card {
  background: var(--baby-card-bg);
  border: 1px solid var(--baby-card-border);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(183, 148, 244, 0.1);
  transition: all 0.3s ease;
}

.baby-card:hover {
  border-color: var(--baby-pink);
  box-shadow: 0 8px 25px var(--baby-accent-glow);
}

/* ======================
   BABY BUTTONS
   ====================== */

.baby-btn-primary {
  background: var(--baby-accent);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 4px 15px var(--baby-accent-glow);
  transition: all 0.3s ease;
}

.baby-btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px var(--baby-accent-glow);
}

.baby-btn-primary:focus-visible {
  outline: 2px solid var(--baby-purple);
  outline-offset: 2px;
}

.baby-btn-secondary {
  background: white;
  color: var(--baby-text);
  border: 1px solid var(--baby-border);
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.baby-btn-secondary:hover {
  background: var(--baby-bg-secondary);
  border-color: var(--baby-pink);
}

.baby-btn-secondary:focus-visible {
  outline: 2px solid var(--baby-purple);
  outline-offset: 2px;
}

/* ======================
   BABY TEXT STYLES
   ====================== */

.baby-heading-gradient {
  background: var(--baby-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.baby-link {
  color: var(--baby-purple);
  text-decoration: none;
  transition: color 0.2s ease;
}

.baby-link:hover {
  color: var(--baby-pink-hover);
}

/* ======================
   BABY TOURNAMENT BRACKET
   ====================== */

.baby-match-card {
  background: var(--baby-card-bg);
  border: 2px solid var(--baby-card-border);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(183, 148, 244, 0.1);
}

.baby-match-active {
  border-color: var(--baby-pink);
  box-shadow: 0 0 20px var(--baby-accent-glow);
}

.baby-match-header {
  background: var(--baby-bg-secondary);
  color: var(--baby-text-muted);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  text-align: center;
  font-weight: 500;
}

.baby-match-divider {
  background: var(--baby-purple-light);
  color: var(--baby-purple);
  padding: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.baby-participant {
  padding: 0.875rem 1rem;
  color: var(--baby-text);
  transition: all 0.2s ease;
}

.baby-participant-clickable:hover {
  background: var(--baby-pink-light);
  cursor: pointer;
}

.baby-participant-winner {
  background: var(--baby-success-bg);
  color: var(--baby-success);
}

.baby-participant-loser {
  background: var(--baby-bg-secondary);
  color: var(--baby-text-muted);
  text-decoration: line-through;
}

/* ======================
   BABY WINNER CELEBRATION
   ====================== */

.baby-winner-badge {
  background: var(--baby-accent);
  border-radius: 9999px;
  padding: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--baby-accent-glow);
}

.baby-winner-card {
  background: var(--baby-winner-bg);
  border: 2px solid var(--baby-winner-border);
  border-radius: 1.5rem;
  padding: 2rem;
}

/* ======================
   BABY SHARE SECTION
   ====================== */

.baby-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.2s ease;
}

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

/* ======================
   BABY ANIMATIONS
   ====================== */

@keyframes baby-pulse {
  0%, 100% {
    box-shadow: 0 0 15px var(--baby-accent-glow);
  }
  50% {
    box-shadow: 0 0 30px var(--baby-accent-glow);
  }
}

.baby-pulse {
  animation: baby-pulse 2s ease-in-out infinite;
}

@keyframes baby-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.baby-float {
  animation: baby-float 3s ease-in-out infinite;
}

/* ======================
   BABY TAG/BADGE
   ====================== */

.baby-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  background: var(--baby-purple-light);
  color: var(--baby-purple);
  border: 1px solid var(--baby-border);
}

.baby-tag-pink {
  background: var(--baby-pink-light);
  color: var(--baby-pink-hover);
  border-color: rgba(246, 135, 179, 0.3);
}

.baby-tag-blue {
  background: var(--baby-blue-light);
  color: #3182ce;
  border-color: rgba(99, 179, 237, 0.3);
}

/* ======================
   BABY BORDER UTILITIES
   ====================== */

.baby-border {
  border-color: var(--baby-border);
}

.baby-border-pink {
  border-color: var(--baby-pink);
}

/* ======================
   BABY FORM ELEMENTS
   ====================== */

.baby-input {
  background: white;
  border: 1px solid var(--baby-border);
  color: var(--baby-text);
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 16px;
  transition: all 0.2s ease;
}

.baby-input:focus {
  outline: none;
  border-color: var(--baby-pink);
  box-shadow: 0 0 0 3px var(--baby-pink-light);
}

/* ======================
   QUICK-START GENDER BUTTONS
   ====================== */

.quick-start-gender-btn {
  flex: 1;
  max-width: 160px;
}