:root {
  --color-bg: #0b0d10;
  --color-bg-elevated: #14171c;
  --color-text: #f4f4f2;
  --color-text-muted: #9aa0a8;
  --color-accent: #4fd1c5;
  --color-danger: #e5484d;
  /* Identidad de la línea v2: la v1 sigue online en pechakucher.pages.dev y
     las dos tienen que distinguirse de un vistazo (franja del cabezal, badge
     de versión, theme_color del manifest). Lavanda a propósito: lejos del
     acento turquesa, del ámbar de ==resaltado== y del rojo de peligro. */
  --color-edition: #a78bfa;

  /* Colores de los marcadores de formato. Son los ÚNICOS que el usuario puede
     cambiar desde la app (js/fmt-colors.js los pisa en :root con la
     preferencia del dispositivo), así que van en variables propias y no
     reusando las de la paleta: cambiar el ámbar del resaltado no puede
     arrastrar nada más. Los defaults están duplicados en fmt-colors.js a
     propósito — ver el comentario de FMT_COLOR_DEFAULTS. */
  /* Ninguno de estos puede ser --color-accent: el resaltado de la palabra que
     se está leyendo pinta el fondo con ese color, y la marca quedaría
     invisible justo encima de la palabra que se está diciendo. */
  --color-fmt-mark: #f6c945;
  --color-fmt-dim: #9aa0a8;
  /* Acento tónico: amarillento y de bajo contraste contra el texto, porque el
     subrayado ya hace el trabajo de señalar. Un color fuerte acá competía con
     la palabra en vez de marcarla. */
  --color-fmt-stress: #ecdca4;
  --color-border: #262a30;

  /* Estado de una slide contra el presupuesto de su formato. Estaban
     hardcodeados en setup.css desde siempre; el rediseño los usa también en el
     medidor del editor a pantalla completa, y dos hexes iguales en dos
     archivos es como se desincronizan. «Muy larga» sigue siendo
     --color-danger: es el mismo «esto no entra» de siempre, no un cuarto
     color. */
  --color-slide-ok: #3fb950;
  --color-slide-tight: #d29922;
  /* Fuera del formato (la slide 21 de una Pechakucha). Canal independiente del
     de tiempo: una slide puede estar cómoda Y sobrar. */
  --color-slide-over: #f5a623;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  /* --radius sigue siendo el de los CONTROLES (inputs, selects, botones de
     barra). El rediseño trajo una escala para las superficies, de más chica a
     más grande: chip, fila, botón grande, tarjeta, hoja modal. Son cinco y no
     una sola porque el salto entre una fila de lista y una tarjeta es
     justamente lo que hace que se lean como cosas distintas. */
  --radius: 10px;
  --radius-xs: 6px;    /* muestras e inputs de color */
  --radius-chip: 12px;
  --radius-row: 13px;
  --radius-btn: 14px;
  --radius-card: 16px;
  --radius-sheet: 20px;
  --radius-pill: 999px;
  /* Escala tipográfica del rediseño. En px y no en rem a propósito: viene del
     diseño como un sistema de tamaños fijos, y el riel de tres pasos depende
     de que los tres entren en el ancho de un teléfono. Todo la referencia por
     token, así que pasarla a rem más adelante es un cambio de este bloque. */
  --fs-screen: 30px;   /* título de pantalla */
  --fs-title: 17px;    /* título de tarjeta */
  --fs-head: 16px;     /* nombre en el cabezal */
  --fs-body: 14px;     /* texto de control */
  --fs-row: 13.5px;    /* texto de fila */
  --fs-meta: 12.5px;
  --fs-hint: 11.5px;   /* ayuda */
  --fs-label: 11px;    /* título de sección, en mayúsculas */
  --fs-step: 10px;     /* etiqueta PASO N */
  --ls-label: 0.8px;
  --ls-step: 0.7px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

.view {
  min-height: 100vh;
  min-height: 100dvh;
}

/* El atributo hidden tiene que ganarle a cualquier display: del autor (un
   .format-row__custom { display: inline-flex } lo dejaba visible). */
[hidden] {
  display: none !important;
}

.muted {
  color: var(--color-text-muted);
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1 {
  margin: 0 0 var(--space-3);
}