/* Troop 321 Theme Variables and Global Styles */

:root {
    /* Primary Colors */
    --color-primary: #169c62;
    --color-primary-hover: #0eb56d;
    --color-primary-light: #11d480;
    
    /* Background Colors */
    --color-bg-light: #f6f8f7;
    --color-bg-dark: #11211a;
    --color-bg-dark-alt: #10221a;
    
    /* Surface Colors */
    --color-surface-light: #ffffff;
    --color-surface-dark: #1a2c24;
    --color-surface-dark-alt: #15231e;
    
    /* Text Colors */
    --color-text-main: #111715;
    --color-text-main-alt: #111815;
    --color-text-sub: #618978;
    
    /* Border Colors */
    --color-border-light: #f0f4f3;
    --color-border-mid: #dce5e1;
    --color-border-mid-alt: #dbe6e1;
    --color-border-dark: #2a4035;
    
    /* Neutral Colors */
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
}

/* Global Styles */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
}

/* Material Symbols Configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Utility Classes */
.icon-primary {
    color: var(--color-primary);
}

.bg-primary-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

/* Dark Mode Utilities */
.dark {
    color-scheme: dark;
}

/* Transition Classes */
.transition-smooth {
    transition: all 0.3s ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-light);
}

.dark ::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-hover);
}