/* No font-family here: Preflight puts --font-sans (Inter, tailwind.css) on html. */
html {
    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. Only the
   horizontal insets are reserved here (for landscape notches): the sticky top/bottom bars and
   .app-container already reserve their own vertical safe-area, and stacking a second
   safe-area-inset-top on top of theirs is what pushed the header far down the screen on phones
   with a real notch/Dynamic Island inset. */
body {
    background-color: var(--yamsa-canvas);
    color: var(--yamsa-ink);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}

/* 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);
}