/* ============================================
   Base Styles
   ============================================ */

* {
    scrollbar-color: var(--color-green-mid) #E8FFF1;
    scrollbar-width: thin;
}

body {
    color: var(--color-text-primary);
    font-family: var(--font-family);
    padding: 0;
    margin: 0;
}

h4, h5, h6 {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
}

p {
    color: var(--color-text-dark);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

p a {
    color: var(--color-text-link);
    text-decoration: underline;
    transition: color var(--transition-fast);
    font-weight: var(--font-weight-semibold);
}

p a:hover {
    color: var(--color-text-link-hover);
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #E8FFF1 0%, #C6F8DB 100%);
    border-radius: var(--radius-medium);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        var(--color-green-light) 0%,
        var(--color-green-mid) 24%,
        var(--color-green-mid) 45%,
        var(--color-green-dark) 76%);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-green);
    border: 2px solid #E8FFF1;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #B2FFD0 0%, #66E6A4 50%, #00B472 100%);
}

/* Container */
.container {
    margin-top: 2.5vh;
}

.content {
    padding: 20px;
    color: var(--color-text-primary);
    padding-right: 15%;
    padding-left: 15%;
}

/* Main content container for AJAX navigation */
#main-content {
    min-height: 400px;
    opacity: 1;
    transition: opacity var(--transition-normal);
}