:root {
    --midnight-900: #060D1F;
    --midnight-800: #0A1628;
    --midnight-700: #0F1F3A;
    --midnight-600: #14294D;
    --mint-50: #F0FAF7;
    --mint-100: #D5F0E8;
    --mint-200: #A8E0CD;
    --mint-300: #7CCBB3;
    --mint-400: #50B698;
    --mint-500: #2A9D7F;
    --mint-600: #1F7D64;
    --mint-700: #145C48;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--midnight-900);
}
::-webkit-scrollbar-thumb {
    background: var(--mint-600);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--mint-500);
}

/* Selection */
::selection {
    background: var(--mint-300);
    color: var(--midnight-900);
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--mint-400);
    outline-offset: 2px;
}

/* Smooth image loading */
img {
    image-rendering: auto;
}

/* Mobile menu animation */
#mobile-menu.open .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
#mobile-menu.open .menu-line:nth-child(2) {
    opacity: 0;
}
#mobile-menu.open .menu-line:nth-child(3) {
    width: 6;
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Subtle pattern overlay for sections */
.section-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(42,157,127,0.05) 1px, transparent 0);
    background-size: 24px 24px;
}