/* ==========================================================================
   Wesley Lima — Shared Shell (design tokens & layout styles)
   Used by the landing page and every /apps/* mini app.
   Pair with shell.js (theme + i18n + <wesley-navbar> / <wesley-footer>).
   ========================================================================== */

:root {
  color-scheme: dark;
}
html:not(.dark) {
  color-scheme: light;
}

body {
  font-family: "Outfit", sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.code {
  font-family: "Fira Code", monospace;
}

/* Ambient mesh background — light is the default, .dark overrides it */
.bg-mesh {
  background-color: #f8fafc;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.08) 0px, transparent 50%);
}
.dark .bg-mesh {
  background-color: #020617;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.05) 0px, transparent 50%);
}

/* Custom elements render as normal block-level chrome */
wesley-navbar,
wesley-footer {
  display: block;
}