/* global.css */

/* 1. Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* 2. Define Brand Variables (BLUE THEME) */
:root {
    /* Core Colors */
    --color-primary: #3B82F6;       /* Blue-500 */
    --color-primary-hover: #2563EB; /* Blue-600 */
    --color-accent: #60A5FA;        /* Blue-400 */
    
    /* Light Mode Backgrounds */
    --color-bg-light: #f8fafc;      /* Slate-50 */
    --color-surface-light: #ffffff;
    
    /* Dark Mode Backgrounds */
    --color-bg-dark: #0B1221;       /* Deep Navy */
    --color-surface-dark: #111827;  /* Gray-900 */
    
    /* Text Colors */
    --color-text-main: #0f172a;     /* Slate-900 */
    --color-text-light: #f1f5f9;    /* Slate-100 */
    --color-text-muted: #64748b;    /* Slate-500 */
    
    /* Borders */
    --color-border: #e2e8f0;
}

/* 3. Base Resets */
body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-main);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Manrope', sans-serif;
}

/* 4. Dark Mode Support */
body.dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
}

/* 5. Custom Utilities */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 20px;
}
body.dark ::-webkit-scrollbar-thumb {
    background-color: #334155;
}

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