/* Intent: The look of the public site on sonnybyduolute.com — the app's colours, a page that follows the system theme
   and a brand panel that stays dark in both themes, because the logo's lettering is white (docs/THEME.md, 4).
   Contains: colour tokens (light, dark, always-dark), page, panel, logo, heading, text, primary link, secondary link */

/* Each --color-* token copies theme.css with the same name: :root here is theme.css :root, the dark block is
   theme.css .dark. A --dark-color-* token is the .dark value in both schemes. SiteFilesTests pins every value. */
:root {
  color-scheme: light dark;
  --color-neutral-50: 248 250 252;
  --color-neutral-900: 15 23 42;
  --dark-color-neutral-100: 10 15 32;
  --dark-color-neutral-300: 28 36 58;
  --dark-color-neutral-700: 180 187 205;
  --dark-color-neutral-900: 235 238 244;
  --dark-color-brand-500: 10 142 255;
  --dark-color-brand-600: 0 115 224;
  --dark-color-brand-700: 0 92 186;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral-50: 4 8 20;
    --color-neutral-900: 235 238 244;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  background: rgb(var(--color-neutral-50));
  color: rgb(var(--color-neutral-900));
  font-family: var(--font-sans);
  line-height: 1.5;
}

.panel {
  width: 100%;
  max-width: 26rem;
  padding: 2rem 1.5rem;
  border: 1px solid rgb(var(--dark-color-neutral-300));
  border-radius: 1rem;
  background: rgb(var(--dark-color-neutral-100));
  color: rgb(var(--dark-color-neutral-700));
  color-scheme: dark;
  text-align: center;
}

.logo {
  display: block;
  width: 100%;
  max-width: 16rem;
  height: auto;
  margin: 0 auto 1.5rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--dark-color-neutral-900));
}

p {
  margin: 0 0 1.5rem;
}

a:focus-visible {
  outline: 2px solid rgb(var(--dark-color-brand-500));
  outline-offset: 2px;
}

.primary {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: rgb(var(--dark-color-brand-600));
  color: rgb(255 255 255);
  font-weight: 600;
  text-decoration: none;
}

.primary:hover {
  background: rgb(var(--dark-color-brand-700));
}

.secondary {
  display: inline-block;
  margin-top: 1rem;
  color: rgb(var(--dark-color-brand-500));
}