:root {
    --bs-primary: #155D7E;
    --bs-success: #3F8D66;
    --bs-info: #2CAABA;
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-heading-font-family: 'Newsreader', serif;

    --surface: #faf8ff;
    --surface-subtle: #F0FDF4;
    --surface-container-low: #f2f3ff;
    --on-surface-variant: #40484d;
}

body {
    font-family: var(--bs-body-font-family);
    background-color: var(--surface);
    color: #131b2e;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: var(--bs-heading-font-family);
}

.text-primary-custom {
    color: var(--bs-primary) !important;
}

.text-success-custom {
    color: var(--bs-success) !important;
}

.text-info-custom {
    color: var(--bs-info) !important;
}

.bg-primary-custom {
    background-color: var(--bs-primary) !important;
    color: white;
}

.bg-success-custom {
    background-color: var(--bs-success) !important;
    color: white;
}

.bg-surface-subtle {
    background-color: var(--surface-subtle) !important;
}

.bg-surface-low {
    background-color: var(--surface-container-low) !important;
}

.btn-primary-custom {
    background-color: var(--bs-primary);
    color: white;
    border: none;
}

.btn-primary-custom:hover {
    background-color: #114b66;
    color: white;
}

.btn-outline-success-custom {
    color: var(--bs-success);
    border-color: var(--bs-success);
    background-color: transparent;
}

.btn-outline-success-custom:hover {
    background-color: var(--bs-success);
    color: white;
}

.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 768px) {
    .section-padding {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.material-symbols-outlined {
    vertical-align: middle;
}

.card {
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    border-color: #e2e7ff;
    height: 100%;
    margin-bottom: 15px;
}

#about {
    .card {
        i {
            padding: 10px;
            border-radius: 5px;
            color: #ccc;
            font-size: 2em;
            margin-bottom: 20px;
        }
    }
}

.badge {
    border: 1px solid #ccc;
    color: #333;
    background: #FFF;
}

.hero-pattern {
    background-image: radial-gradient(#155D7E 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}