:root {
    --bg: #f8f9fa;
    --surface-blur: rgba(248, 249, 250, 0.8);
    --text-main: #2d3436;
    --text-muted: #636e72;
    --accent: #0984e3;
    --border-color: #dfe6e9;
}

html.dark {
    --bg: #1a1c1e;
    --surface-blur: rgba(26, 28, 30, 0.7);
    --text-main: #e2e2e6;
    --text-muted: #c4c7cd;
    --accent: #d1dce0;
    --border-color: rgba(68, 71, 78, 0.3);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}