/* The stack is written down here rather than left to whichever reset is loaded: the app's
   proportions - where a label wraps, how wide a pill sits - were drawn against this one, and
   Preflight's own leads with -apple-system where Reboot led with system-ui, which resolves to a
   different face outside Apple's platforms. */
html {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    scroll-behavior: smooth;
}

/* Preflight paints neither, and `color-scheme` alone only gets the page a browser's idea of a
   dark ground - close enough to hide that the palette is not being used at all. */
body {
    background-color: var(--yamsa-canvas);
    color: var(--yamsa-ink);
    padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}

/* Reboot gave every heading its own colour; Preflight lets them inherit the body's. */
h1, h2, h3, h4, h5, h6 {
    color: var(--yamsa-ink-strong);
}

/* The toast's own ground and the four tones it is raised in. The container around it is
   click-through, so that a toast at the bottom edge does not take the taps meant for the page
   underneath; the toast itself has to take its own. */
.toast-yamsa-inner {
    background: var(--yamsa-surface-raised);
    color: var(--yamsa-ink);
    border-top: 4px solid transparent;
    pointer-events: auto;
    border-radius: 0.9rem;
    min-height: 3.5rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.toast-yamsa-inner.toast-primary {
    background: linear-gradient(45deg, transparent, var(--yamsa-brand-soft)), var(--yamsa-surface-raised);
    border-top-color: var(--yamsa-brand-text);
}

.toast-yamsa-inner.toast-success {
    background: linear-gradient(45deg, transparent, var(--yamsa-success-soft)), var(--yamsa-surface-raised);
    border-top-color: var(--yamsa-success-text);
}

.toast-yamsa-inner.toast-warning {
    background: linear-gradient(45deg, transparent, var(--yamsa-warning-soft)), var(--yamsa-surface-raised);
    border-top-color: var(--yamsa-warning-text);
}

.toast-yamsa-inner.toast-danger {
    background: linear-gradient(45deg, transparent, var(--yamsa-danger-soft)), var(--yamsa-surface-raised);
    border-top-color: var(--yamsa-danger-text);
}