/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Sans+KR:wght@400;500;700&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');

:root {
    --primary-color: #0d7ff2;
    --background-light: #f5f7f8;
    --background-dark: #101922;
    --text-slate-900: #0f172a;
    --text-slate-500: #64748b;
    --kakao-yellow: #FEE500;
    --naver-green: #03C75A;
}

body {
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    color: var(--text-slate-900);
    background-color: var(--background-light);
    overflow-x: hidden;
}

/* Utilities */
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-background-light { background-color: var(--background-light); }
.text-slate-900 { color: var(--text-slate-900) !important; }
.text-slate-500 { color: var(--text-slate-500) !important; }

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-weight: 700;
}
.btn-primary:hover {
    background-color: #0b6bcb;
    border-color: #0b6bcb;
}

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