/*
 * Material Symbols Outlined — Self-hosted
 *
 * To generate a subset of only the icons used:
 * 1. List all icon names from the templates
 * 2. Use Google's Material Symbols API with only those icons
 * 3. Download the font file and place in assets/fonts/
 *
 * For now, this loads the full variable font.
 * Replace with a subset once all icons are finalized.
 *
 * Icons used in 256SOF:
 * expand_more, close, menu, arrow_forward, arrow_back,
 * camera_roll, cast_connected, grid_view, language, desktop_windows,
 * bolt, check_circle, verified, shield, speed, devices, cloud_sync,
 * qr_code_scanner, camera, filter_vintage, laptop_mac, business_center,
 * route, help_outline, photo_camera, format_quote, article,
 * rocket_launch, update, code, cancel
 */

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}