/*
 * 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.
 *
 * Text is smoothed in grayscale where a platform offers the choice (macOS browsers): Google Sans
 * Flex is drawn for it, and subpixel smoothing thickens its strokes on light text over a dark
 * surface. Every surface the package draws — the showcase, the error pages — is set this way,
 * and so is an application, which drops Tailwind's `antialiased` class with nothing to replace.
 *
 * 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);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}