/* Base Variables */
:root {
    /* Main Theme Colors */
    --primary: rgb(157, 157, 189);
    --primary-dark: rgb(137, 137, 169);
    --primary-light: rgb(177, 177, 209);
    --primary-lighter: rgb(237, 237, 244);
    
    /* Text Colors */
    --text-dark: rgb(51, 51, 68);
    --text-medium: rgb(107, 107, 142);
    --text-light: rgb(157, 157, 189);
    
    /* Background Colors */
    --bg-main: #ffffff;
    --bg-light: #f8f8fb;
    --bg-overlay: rgba(157, 157, 189, 0.1);
    
    /* Border and Shadow */
    --border-color: rgba(157, 157, 189, 0.25);
    --shadow-color: rgba(157, 157, 189, 0.1);
    --shadow-hover: rgba(157, 157, 189, 0.15);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    --success: rgb(102, 187, 106);
    --success-lighter: rgba(102, 187, 106, 0.1);
    --warning: rgb(255, 193, 7);
    --warning-lighter: rgba(255, 193, 7, 0.1);
    --error: rgb(244, 67, 54);
    --error-lighter: rgba(244, 67, 54, 0.1);

    --anchor-color: rgb(140, 140, 254);
}

/* Reset & Base Styles */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
    color: var(--text-dark);
    background: var(--bg-light);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(157, 157, 189, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(157, 157, 189, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 157, 189, 0.4);
}