/* Tema base "papel": lienzo blanco, superficies gris cálido y un solo acento.
   Todo el diseño sale de estas variables. Para otro estilo, agrega un bloque
   :root[data-tema="nombre"] que las redefina; no hace falta tocar app.css.
   El color de acento también se cambia por negocio desde "Mi página". */
:root {
  color-scheme: light;

  /* Color */
  --papel: #ffffff;      /* fondo de página */
  --ceniza: #efefef;     /* bandas y tarjetas */
  --niebla: #f5f5f5;     /* superficies anidadas */
  --marfil: #ebe6dd;     /* bloques destacados */
  --bruma: #e8e8e8;      /* líneas finas */
  --grafito: #202020;    /* texto y botones */
  --acero: #4d4d4d;      /* texto secundario */
  --pizarra: #6f6f6f;    /* texto de apoyo */
  --acento: #ff682c;     /* subrayados y marcas pequeñas; nunca relleno de botón */
  --laton: #816729;      /* segundo acento, para avisos discretos */

  /* Tipografía */
  --fuente-titulos: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-titulos: 400;
  --tracking-titulos: -0.02em;

  /* Forma: botones rectos, tarjetas asimétricas, navegación en pastilla */
  --radio-boton: 0px;
  --radio-campo: 0px;
  --radio-tarjeta: 6px 0 0;
  --radio-dato: 20px;
  --radio-etiqueta: 20px;
  --radio-pastilla: 200px;

  /* Espacio */
  --ancho-pagina: 1200px;
  --margen: 20px;
  --separacion: 20px;
  --relleno-tarjeta: clamp(22px, 4vw, 40px);
  --salto-seccion: clamp(44px, 8vw, 80px);
}