/* base.css — tipografía del sistema, reset ligero y layout base */

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

/* Pila de fuentes del sistema: nativa de cada plataforma, sin descargas. */
:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
             "Helvetica Neue", Arial, sans-serif;
}

/* El atributo [hidden] debe ocultar siempre, aunque la clase del elemento
   defina display (p. ej. .session/.dialog usan display:flex). */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-weight: 400;
  background-color: var(--bg);
  background-image: var(--bg-ambient, none);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* transición suave al alternar tema */
  transition: background-color .4s ease, color .4s ease;
}

h1, h2, h3 {
  font-weight: 700;
  margin: 0 0 .4em;
  line-height: 1.15;
}

p { margin: 0 0 1em; line-height: 1.5; }

button { font-family: inherit; }

/* Accesibilidad: foco visible solo con teclado */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Contenedor de pantallas: deja aire arriba (topbar) y abajo (pill) */
.screens {
  max-width: 560px;
  margin: 0 auto;
  padding: 88px 20px 120px;
}

.screen { display: none; }
.screen.is-active { display: block; }

/* Capa de fondo: imagen seleccionable + scrim de legibilidad sobre la paleta */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.app-bg.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--bg) 55%, transparent);
}