/* Saved user settings applied after the base Stoppin theme. */

html[data-theme="light"] {
  color-scheme: light;
  --background: #f3f6f9;
  --foreground: #11151a;
  --surface: #ffffff;
  --surface-2: #e9eef3;
  --card: #ffffff;
  --card-foreground: #11151a;
  --popover: #ffffff;
  --popover-foreground: #11151a;
  --primary: #e96800;
  --primary-foreground: #ffffff;
  --secondary: #11151a;
  --secondary-foreground: #ffffff;
  --muted: #e9eef3;
  --muted-foreground: #59636f;
  --accent: #e5ebf1;
  --accent-foreground: #11151a;
  --border: rgb(17 21 26 / 0.14);
  --input: rgb(17 21 26 / 0.18);
  --ring: rgb(233 104 0 / 0.72);
}

html[data-theme="light"] .stoppin-home-stage__content,
html[data-theme="light"] body {
  color: var(--foreground);
}

html[data-contrast="high"] {
  --muted-foreground: color-mix(in srgb, var(--foreground) 78%, transparent);
  --border: color-mix(in srgb, var(--foreground) 34%, transparent);
  --input: color-mix(in srgb, var(--foreground) 42%, transparent);
  --ring: var(--primary);
}

html[data-contrast="high"] :focus-visible {
  outline-width: 3px;
  outline-offset: 4px;
}

html.reduce-motion,
html.reduce-motion * {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

html[data-compact="true"] {
  /* Tailwind v4 spacing utilities derive from this variable. Reducing it by
     twelve percent compacts the whole interface without breaking tap targets. */
  --spacing: 0.22rem;
}

html[data-compact="true"] .glass,
html[data-compact="true"] article,
html[data-compact="true"] section {
  --runtime-compact-factor: 0.86;
}

html[data-compact="true"] .field-control {
  min-height: 2.45rem;
}

html[data-data-saver="true"] [data-decorative-media="true"],
html[data-data-saver="true"] video[data-autoplay-media="true"] {
  display: none !important;
}

html[data-data-saver="true"] .stoppin-hero__embers,
html[data-data-saver="true"] .circadian-sky__stars,
html[data-data-saver="true"] .circadian-sky__clouds {
  display: none !important;
}

html[data-media-quality="standard"] img[data-adaptive-media="true"],
html[data-data-saver="true"] img[data-adaptive-media="true"] {
  image-rendering: auto;
}