/**
 * Theme: Soft Coral
 * Pastel coral/rose – soft and subtle.
 */
:root {
  --primary: #e8b4a8;
  --primary-dark: #c4958a;
  --primary-light: #fce8e5;
  --plyr-color-main: var(--primary-dark);
  --plyr-video-control-background-hover: transparent;
  --plyr-video-control-color-hover: var(--primary-dark);
  --secondary: #d4a59e;
  --secondary-dark: #c4958a;
  --secondary-light: #fce8e5;
  --third: #e8c4a8;
  --third-light: #f5e6dc;
  --Neutral-10: #faf9f8;
  --Neutral-20: #f0eeec;
  --Neutral-30: #e5e2df;
  --Neutral-40: #d5d0cc;
  --Neutral-50: #b0a9a4;
  --Neutral-60: #7a736e;
  --Neutral-70: #5c5652;
  --Neutral-80: #3d3936;
  --Neutral-90: #2a2725;
  --white: #ffffff;
  --black: #1a1816;
  --gray: #7a736e;
  --system-warning-primary: #d4986a;
  --system-warning-light: #fcf0e5;
  --system-error-primary: #c4958a;
  --system-error-light: #fce8e5;
  --system-info-primary: #8eb4d4;
  --system-info-light: #e8f2fa;
  --system-success-primary: #7eb8a4;
  --system-success-light: #e8f5f0;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
}

/* Header & footer – pastel background, dark text for contrast */
.top-nav {
  background-color: var(--primary) !important;
  border-bottom-color: var(--primary-dark) !important;
  color: var(--Neutral-80);
}
.top-nav .brand,
.top-nav .brand:hover,
.top-nav .nav-actions > .btn-rounded,
.top-nav .nav-actions > .stream-btn.btn-rounded {
  color: var(--Neutral-90) !important;
}
.top-nav .col-xl-3 a[href]:not([href="#"]) {
  color: var(--Neutral-90) !important;
}
.top-nav .col-xl-5 form a,
.top-nav .col-xl-5 a {
  color: var(--Neutral-90) !important;
}
.top-nav .nav-actions .profile:hover {
  color: var(--Neutral-90);
  opacity: 0.9;
}
.top-nav .nav-actions .btn-outline,
.top-nav .input-group .btn {
  color: var(--Neutral-80);
  border-color: rgba(0,0,0,0.12);
  background-color: rgba(255,255,255,0.5);
}
.top-nav .input-group input[type=text] {
  background-color: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
  color: var(--Neutral-90);
}
.top-nav .input-group input[type=text]::placeholder {
  color: var(--Neutral-60);
}
/* User dropdown: always white bg + dark text (works even if Bootstrap moves it in DOM) */
.dropdown-menu-user,
.top-nav .dropdown-menu-user {
  background-color: #fff !important;
  color: #212529 !important;
}
.dropdown-menu-user li,
.dropdown-menu-user .dropdown-item,
.dropdown-menu-user a,
.dropdown-menu-user .stream-btn,
.dropdown-menu-user .btn-primary-s,
.dropdown-menu-user span:not(.material-symbols-outlined):not(.bubble) {
  color: #212529 !important;
  background-color: transparent !important;
}
.dropdown-menu-user a.stream-btn:hover,
.dropdown-menu-user .stream-btn:hover,
.dropdown-menu-user .btn-primary-s:hover {
  color: var(--primary) !important;
  background-color: var(--Neutral-10) !important;
}
.dropdown-menu-user .material-symbols-outlined {
  color: #495057 !important;
}
.dropdown-menu-user .material-symbols-outlined:hover {
  color: var(--primary) !important;
}
.dropdown-menu-user .profile-stats h6,
.dropdown-menu-user .profile-stats p,
.dropdown-menu-user .profile-stats .stats,
.dropdown-menu-user .profile-stats strong,
.dropdown-menu-user .body-14,
.dropdown-menu-user .body-12 {
  color: #212529 !important;
}

footer {
  background-color: var(--primary-light);
  border-top: 2px solid var(--primary);
  color: var(--Neutral-70);
}
footer .langs {
  color: var(--Neutral-70);
}
footer .langs a {
  color: var(--primary-dark);
}