/* ==========================================================================
   Pink Theme Color Variables
   ========================================================================== */

:root {
    /* Colors - pink theme */
    --primary-color: #ec4899;
    --primary-hover: #db2777;
    --secondary-color: #f472b6;
    --secondary-hover: #ec4899;
    --accent-color: #f472b6;
    --accent-hover: #ec4899;
    --danger-color: #f43f5e;
    --danger-hover: #e11d48;
    --success-color: #ec4899;
    --success-hover: #db2777;
    --warning-color: #f97316;
    --warning-hover: #ea580c;

    /* Backgrounds - pink theme */
    --background-color: #fdf2f8;
    --surface-color: #fce7f3;
    --surface-alternate-color: #fbcfe8;

    /* Text - adjusted for pink theme */
    --text-primary: #831843;
    --text-secondary: #be185d;
    --text-inverted: #fdf2f8;

    /* Borders & Shadows - adjusted for pink theme */
    --border-color: #fbcfe8;
    --shadow-light: 0 1px 3px 0 rgba(236, 72, 153, 0.1), 0 1px 2px 0 rgba(236, 72, 153, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(236, 72, 153, 0.1), 0 2px 4px -1px rgba(236, 72, 153, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(236, 72, 153, 0.1), 0 4px 6px -2px rgba(236, 72, 153, 0.05);
}

/* Additional pink theme specific overrides */
.pinned-section {
    background-color: rgba(236, 72, 153, 0.15) !important;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(236, 72, 153, 0.2) !important;
}

#theme-toggle:hover {
    background: rgba(236, 72, 153, 0.2) !important;
}

/* Pink theme table row hover effect */
.data-table tr:hover td {
    background: rgba(236, 72, 153, 0.15) !important;
    color: var(--text-primary) !important;
}

/* Pink theme badge colors */
.status-ongoing {
  background: #ec4899 !important;
  color: #ffffff !important;
}

.status-ongoing:hover {
  background: #db2777 !important;
}

.status-ongoing:focus {
  background: #db2777 !important;
  outline: 2px solid #ec4899 !important;
  outline-offset: 2px !important;
}

.status-upcoming {
  background: #f472b6 !important;
  color: #831843 !important;
}

.status-upcoming:hover {
  background: #ec4899 !important;
}

.status-upcoming:focus {
  background: #ec4899 !important;
  outline: 2px solid #f472b6 !important;
  outline-offset: 2px !important;
}