@import url("https://fonts.googleapis.com/css?family=Montserrat");

:root {
    --very-light-teal: #d9fafe;
    --light-teal: #5FE1E7;
    --med-teal: #4db7bb;
    --off-white: #f9f9fb;
    --rz-primary: var(--med-teal);
    --dark-secondary: #191b1e;
    
    /* Dark mode additions */
    --dark-primary: #1a1d20;
    --dark-surface: #232629;
    --dark-surface-variant: #2a2e32;
    --text-primary: var(--off-white);
    --text-secondary: #b8bcc8;
    --text-muted: #8a8e9a;
    --border-color: #3a3f45;
}

$primary: $medTeal;

html {
    font-size: 14px;
}

html, body {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    background-color: var(--dark-primary);
    color: var(--text-primary);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--dark-secondary), 0 0 0 0.25rem var(--light-teal);
}

html {
    position: relative;
    min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Dark mode hero section */
.hero-section {
    background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--light-teal) 100%);
    color: var(--text-primary);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Dark mode cards */
.card {
    transition: transform 0.2s ease-in-out;
    background-color: var(--dark-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(95, 225, 231, 0.15);
}

.card-header {
    background-color: var(--dark-surface-variant);
    border-bottom-color: var(--border-color);
}

.card-header.bg-primary {
    background-color: var(--med-teal) !important;
    color: var(--dark-secondary) !important;
}

.card-header.bg-success {
    background-color: var(--light-teal) !important;
    color: var(--dark-secondary) !important;
}

/* Dark mode text colors */
.text-primary {
    color: var(--light-teal) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-success {
    color: var(--light-teal) !important;
}

/* Dark mode backgrounds */
.bg-light {
    background-color: var(--dark-surface) !important;
    color: var(--text-primary) !important;
}

.bg-primary {
    background-color: var(--med-teal) !important;
    color: var(--dark-secondary) !important;
}

/* Dark mode buttons */
.btn-primary {
    background-color: var(--med-teal);
    border-color: var(--med-teal);
    color: var(--dark-secondary);
}

.btn-primary:hover {
    background-color: var(--light-teal);
    border-color: var(--light-teal);
    color: var(--dark-secondary);
}

.btn-outline-primary {
    color: var(--light-teal);
    border-color: var(--light-teal);
}

.btn-outline-primary:hover {
    background-color: var(--light-teal);
    border-color: var(--light-teal);
    color: var(--dark-secondary);
}

.btn-light {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--dark-secondary);
}

.btn-light:hover {
    background-color: var(--very-light-teal);
    border-color: var(--very-light-teal);
    color: var(--dark-secondary);
}

.btn-outline-light {
    color: var(--off-white);
    border-color: var(--off-white);
}

.btn-outline-light:hover {
    background-color: var(--off-white);
    border-color: var(--off-white);
    color: var(--dark-secondary);
}

/* Dark mode forms */
.form-control, .form-select {
    background-color: var(--dark-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--dark-surface-variant);
    border-color: var(--light-teal);
    box-shadow: 0 0 0 0.2rem rgba(95, 225, 231, 0.25);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Dark mode borders */
.border-primary {
    border-color: var(--med-teal) !important;
}

.border-success {
    border-color: var(--light-teal) !important;
}

/* Dark mode icons */
.bi {
    line-height: 1;
}

/* Dark mode rounded elements */
.rounded {
    background-color: var(--dark-surface);
}

/* Dark mode shadows */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(95, 225, 231, 0.1) !important;
}

/* Navbar dark mode */
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: var(--text-primary);
}

.navbar-light {
    background-color: var(--dark-surface) !important;
    border-bottom-color: var(--border-color);
}

/* Footer dark mode */
.footer {
    background-color: var(--dark-surface);
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

/* Container backgrounds */
.container {
    color: var(--text-primary);
}

/* List styling */
.list-unstyled li {
    color: var(--text-secondary);
}

/* Check circle icons */
.bi-check-circle, .bi-check-circle-fill {
    color: var(--light-teal) !important;
}

/* Arrow icons */
.bi-arrow-right {
    color: var(--med-teal) !important;
}

/* Special styling for numbered circles */
.rounded-circle {
    background-color: var(--med-teal) !important;
    color: var(--dark-secondary) !important;
}

/* Display text colors */
.display-1, .display-3, .display-4, .display-5 {
    color: var(--text-primary);
}

/* Lead text */
.lead {
    color: var(--text-secondary);
}

/* Card text override */
.card-text {
    color: var(--text-secondary);
}

/* Card title override */
.card-title {
    color: var(--text-primary);
}

/* Small text */
small {
    color: var(--text-muted);
}

/* Focus states for dark mode */
.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 0.1rem var(--dark-secondary), 0 0 0 0.25rem var(--light-teal);
}

/* Custom scrollbar for dark mode */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--med-teal);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--light-teal);
}