:root {
    --pizzaapp-light-background: #fffbff;
    --pizzaapp-light-foreground: #201a17;
    --pizzaapp-dark-background: #1c1b1f;
    --pizzaapp-dark-foreground: #eae0da;
    --pizzaapp-loader-track-light: #cccccc;
    --pizzaapp-loader-track-dark: rgba(234, 224, 218, 0.32);
    --pizzaapp-loader-accent-light: #333333;
    --pizzaapp-loader-accent-dark: #ffb68a;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--pizzaapp-light-background);
    color: var(--pizzaapp-light-foreground);
    color-scheme: light;
}

html[data-app-theme="light"] {
    background-color: var(--pizzaapp-light-background);
    color: var(--pizzaapp-light-foreground);
    color-scheme: light;
}

html[data-app-theme="dark"] {
    background-color: var(--pizzaapp-dark-background);
    color: var(--pizzaapp-dark-foreground);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html:not([data-app-theme]) {
        background-color: var(--pizzaapp-dark-background);
        color: var(--pizzaapp-dark-foreground);
        color-scheme: dark;
    }
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    background-color: inherit;
    color: inherit;
    text-align: center;
}

.loading-spinner {
    display: block;
}

.loading-spinner__track {
    stroke: var(--pizzaapp-loader-track-light);
}

.loading-spinner__accent {
    stroke: var(--pizzaapp-loader-accent-light);
}

html[data-app-theme="dark"] .loading-spinner__track {
    stroke: var(--pizzaapp-loader-track-dark);
}

html[data-app-theme="dark"] .loading-spinner__accent {
    stroke: var(--pizzaapp-loader-accent-dark);
}

@media (prefers-color-scheme: dark) {
    html:not([data-app-theme]) .loading-spinner__track {
        stroke: var(--pizzaapp-loader-track-dark);
    }

    html:not([data-app-theme]) .loading-spinner__accent {
        stroke: var(--pizzaapp-loader-accent-dark);
    }
}
/*
 * No prefers-reduced-motion rule for the loading spinner, deliberately: it animates through SVG
 * SMIL (<animateTransform>), which a stylesheet cannot pause — a media query here would look like
 * handling and do nothing. It is also the case reduced motion is least concerned with: a small
 * indicator that shows for a second while the app boots, not a large or parallax movement. The
 * in-app motion is handled properly, in AppTheme.
 */

/*
 * A visible focus ring for the DOM nodes that live *over* the Compose canvas — the AdSense overlays
 * core-ads.js positions there are real, focusable elements, and nothing else was styling them.
 * :focus-visible rather than :focus, so a mouse click does not leave a ring behind.
 *
 * The generated legal pages do not load this sheet; they inline their own from LegalContent.kt.
 */
:focus-visible {
    outline: 2px solid var(--pizzaapp-loader-accent-light);
    outline-offset: 2px;
}

html[data-app-theme="dark"] :focus-visible {
    outline-color: var(--pizzaapp-loader-accent-dark);
}