/* Global CSS Variables & Core Styling */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&family=Fira+Code:wght@400;500;700&display=swap');

:root {
    /* Color Tokens (Tailored HSL for Harmony) */
    --ink-dark: 232 39% 10%;      /* #101225 */
    --ink-light: 232 39% 15%;
    --muted-grey: 220 14% 46%;    /* #667085 */
    --off-white: 270 20% 98%;     /* #faf9ff */
    
    /* Brand Accents */
    --lilac-primary: 262 89% 65%;  /* #8b5cf6 */
    --lilac-dark: 262 80% 50%;
    --lilac-light: 262 80% 95%;
    
    --leaf-primary: 142 72% 45%;   /* #22c55e */
    --leaf-dark: 142 76% 36%;
    --leaf-light: 142 70% 95%;
    
    /* Layout Standard dimensions */
    --banner-height-desktop: 320px;
    --banner-height-mobile: 180px;
    --avatar-size-desktop: 160px;
    --avatar-size-mobile: 120px;
    
    /* Transition presets */
    --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: hsl(var(--off-white));
    color: hsl(var(--ink-dark));
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Clean, modern scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: hsla(var(--ink-dark) / 0.15);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsla(var(--ink-dark) / 0.3);
}

/* Focus utility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid hsl(var(--lilac-primary));
    outline-offset: 4px;
}

/* Utility layouts */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Interactive helper classes */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-spring);
}