@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap');

@layer base {
  body.theme-ovooz-es {
    /* The base layer uses !important to take precedence over Tailwind body utilities. */
    background-color: #ffffff !important;
    color: #343434 !important;
    font-family: 'Mulish', 'Muli', sans-serif !important;
  }
}

body.theme-ovooz-es,
.theme-ovooz-es {
  --primary-500: #5d42ad;
  --primary-400: #6f54bd;
  --primary-300: #8e79d0;
  --primary-600: #4a3090;

  --secondary-600: #97be0d;
  --color-share-facebook: #3c5898;
  --color-share-x: #36d8ff;

  --gradient-primary-secondary: linear-gradient(112deg, #6f54bd 0%, #4a3090 100%);

  --color-bg-base:  #ffffff;
  --color-bg-card:  #efefef;
  --color-bg-subtle: #f5f5f5;

  --font-family-base: 'Mulish', 'Muli', sans-serif;
  --font-family-display: 'Mulish', 'Muli', sans-serif;
  --color-text-base:         #343434;
  --color-text-muted:        rgba(52, 52, 52, 0.55);
  --color-text-inverse:      #ffffff;
  --color-text-base-op-64:   rgba(52, 52, 52, 0.64);

  --base-0:   255 255 255;
  --base-950:  52  52  52;
  --color-surface-base:        #ffffff;
  --color-surface-base-op-16:  rgba(255,255,255,0.16);
  --color-surface-base-op-32:  rgba(255,255,255,0.32);

  --color-border: #e0e0e0;

  --color-input-bg:     #f5f5f5;
  --color-input-border: #d0c8e8;

  --color-icon-default: #5d42ad;

  --radius-card: 12px;

  --color-error: #d9534f;

  --header-bg:     #ffffff;
  --header-shadow: 0 2px 8px rgba(93, 66, 173, 0.08);
  --header-nav-hover: #f0ecfa;

  --footer-bg:     #ffffff;
  --footer-border: #e0e0e0;

  --color-dropdown-bg:             #ffffff;
  --color-dropdown-border:         #e0e0e0;
  --color-dropdown-hover:          #f0ecfa;
  --color-dropdown-text:           #343434;
  --color-dropdown-text-selected:  #5d42ad;
  --color-dropdown-item-selected:  #5d42ad;
  --bg-dropdown-item-selected:      rgba(93, 66, 173, 0.08);
  --bg-dropdown-item-selected-hover: rgba(93, 66, 173, 0.14);

  --background: var(--color-bg-base);
  --foreground: var(--color-text-base);
  --card: var(--color-bg-card);
  --card-foreground: var(--color-text-base);
  --primary: var(--primary-500);
  --primary-foreground: #ffffff;
  --muted: var(--color-bg-subtle);
  --muted-foreground: var(--color-text-muted);
  --accent: var(--color-dropdown-hover);
  --accent-foreground: var(--primary-600);
  --border: var(--color-border);
  --input: var(--color-input-border);
  --ring: var(--primary-500);
  --radius: var(--radius-card);

  --color-focus-outline: #5d42ad;
}

.theme-ovooz-es .btn-primary {
  background: #5d42ad !important;
  background-color: #5d42ad !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.theme-ovooz-es .btn-primary:hover:not(:disabled) {
  background: #4a3090 !important;
  background-color: #4a3090 !important;
}

.theme-ovooz-es .btn-tertiary {
  background: var(--gradient-primary-secondary) !important;
  color: #ffffff !important;
}

.theme-ovooz-es .pr-page {
  background-color: #ffffff;
  color: #343434;
  font-family: 'Mulish', 'Muli', sans-serif;
}

.theme-ovooz-es .pr-card {
  background-color: #efefef;
  border-color: #e0e0e0;
  border-radius: 12px;
  max-width: 480px;
}

.theme-ovooz-es .pr-title {
  color: #343434;
  font-size: 28px;
  font-weight: 700;
}

.theme-ovooz-es .pr-subtitle {
  color: rgba(52, 52, 52, 0.6);
}

.theme-ovooz-es .pr-label {
  color: #343434;
}

.theme-ovooz-es .pr-input {
  background-color: #ffffff;
  border-color: #d0c8e8;
  color: #343434;
  border-radius: 999px;
}

.theme-ovooz-es .pr-input:focus {
  border-color: #5d42ad;
  outline: none;
}

.theme-ovooz-es .pr-btn {
  background-color: #5d42ad !important;
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 700;
}

.theme-ovooz-es .pr-error-msg {
  color: #d9534f;
}

.theme-ovooz-es .pr-logo {
  max-height: 56px;
}

.theme-ovooz-es a:not([class]) {
  color: #5d42ad;
}

.theme-ovooz-es a:not([class]):hover {
  color: #4a3090;
}

@media (min-width: 768px) {
  .theme-ovooz-es .ovooz-login-page .login-content {
    transform: translateY(-110px);
  }
}