/*
 * The page itself: M3's background and default ink, in the brand typeface.
 *
 * The page is `surface` and its text `on-surface`, the default typography colour
 * (docs/reference/m3/styles.md § Typography, "Accessibility requirements"). `color-scheme` is
 * declared with the roles in tokens/scheme.css, so native controls and scrollbars change with
 * `data-theme` in the same block as the colours. The typeface is
 * `--md-ref-typeface-brand` (tokens/type.css), Google Sans Flex from tokens/font.css, whose
 * `@font-face` this file imports into the same layer.
 *
 * In `material.base`, above the reset and below every component and text class.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import '../tokens/font.css';

@layer material.base {
    html {
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        font-family: var(--md-ref-typeface-brand);
    }
}