/* Sistema de diseño de Fatum · Empira Noctis
   Fuente única de colores, letras, espacios, bordes, sombras y movimiento para las tres interfaces:
   la app (celular y PC), la página de los libros y los componentes de React (apps/diseno/react).
   Dos capas: primitivos (--empira-*: el color tal cual) y semánticos (--color-*, --texto-*…: para qué se usa).
   Los componentes usan SIEMPRE los semánticos; los primitivos sólo se tocan aquí. */

:root {
  /* ---------- primitivos: la ciudad de noche ---------- */
  --empira-noche-950: #070a16;
  --empira-noche-900: #0d1226;
  --empira-noche-800: #151b33;
  --empira-noche-700: #1e2542;
  --empira-noche-600: #2a3256;
  --empira-farol-300: #f6d39a;
  --empira-farol-500: #e8b55c;
  --empira-farol-700: #b8863a;
  --empira-carmesi-400: #cf3a52;
  --empira-carmesi-500: #b8293f;
  --empira-carmesi-700: #7c1426;
  --empira-hueso: #ece4d2;
  --empira-plata: #a6adc1;
  --empira-ceniza: #7d849a;
  /* los libros: pergamino, tinta y cuero */
  --empira-papel: #f2e1c0;
  --empira-tinta: #3a3029;
  --empira-lapiz-rojo: #b3262f;
  --empira-cuero-500: #8a2f2a;
  --empira-cuero-700: #4a1414;
  --empira-madera: #1a100a;

  /* ---------- color por uso ---------- */
  --color-fondo: var(--empira-noche-900);
  --color-fondo-hondo: var(--empira-noche-950);
  --color-superficie: rgba(30, 37, 66, 0.55);          /* tarjetas */
  --color-superficie-alta: rgba(42, 50, 86, 0.82);     /* menús, hojas inferiores, diálogos */
  --color-superficie-solida: var(--empira-noche-800);
  --color-borde: rgba(236, 228, 210, 0.11);
  --color-borde-fuerte: rgba(236, 228, 210, 0.22);
  --color-texto: var(--empira-hueso);                  /* 14.7:1 sobre el fondo */
  --color-texto-suave: var(--empira-plata);            /*  8.3:1 */
  --color-texto-tenue: var(--empira-ceniza);           /*  5.0:1: sólo textos secundarios, nunca lo único */
  --color-acento: var(--empira-carmesi-500);           /* acción principal (con texto hueso encima) */
  --color-acento-claro: var(--empira-carmesi-400);
  --color-sobre-acento: var(--empira-hueso);
  --color-luz: var(--empira-farol-500);                /* realces, foco, lo activo */
  --color-luz-suave: rgba(232, 181, 92, 0.16);
  --color-exito: var(--empira-farol-500);
  --color-aviso: #f0b45a;
  --color-error: #e0707e;
  --color-info: #8ea7f0;
  --color-foco: var(--empira-farol-500);
  --color-velo: rgba(5, 7, 16, 0.62);                  /* detrás de diálogos y hojas */
  /* en el libro (papel) */
  --color-papel: var(--empira-papel);
  --color-tinta: var(--empira-tinta);
  --color-tinta-suave: rgba(58, 48, 41, 0.72);
  --color-anotacion: var(--empira-lapiz-rojo);

  --degradado-acento: linear-gradient(135deg, var(--empira-carmesi-400) 0%, var(--empira-carmesi-500) 45%, var(--empira-carmesi-700) 100%);
  --degradado-luz: linear-gradient(135deg, rgba(232, 181, 92, 0.16), rgba(184, 41, 63, 0.14));

  /* ---------- letras ---------- */
  --fuente-titulo: "IM Fell English", "Alegreya", Georgia, serif;   /* placas y títulos */
  --fuente-lectura: "Alegreya", Georgia, serif;                       /* mensajes y textos largos */
  --fuente-ui: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;    /* botones, etiquetas, formularios */
  --fuente-letrero: "Alegreya Sans SC", "Alegreya Sans", system-ui, sans-serif; /* rótulos cortos */
  --fuente-mano: "Amatic SC", "Alegreya", serif;                      /* el libro */
  --fuente-nota: "Caveat", cursive;                                   /* anotaciones y post-its */

  /* escala de tamaño: nada de cuerpo menor a 16px; 13px sólo para etiquetas */
  --texto-xs: 0.8125rem;   /* 13 */
  --texto-sm: 0.875rem;    /* 14 */
  --texto-md: 1rem;        /* 16: cuerpo */
  --texto-lg: 1.125rem;    /* 18 */
  --texto-xl: 1.375rem;    /* 22 */
  --texto-2xl: 1.75rem;    /* 28 */
  --texto-3xl: 2.25rem;    /* 36 */
  --altura-linea: 1.5;
  --altura-linea-titulo: 1.15;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 700;

  /* ---------- espacio (múltiplos de 4) ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;   /* margen lateral en el celular */
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --toque-min: 44px; /* tamaño mínimo de todo lo que se toca */

  /* ---------- bordes, sombras y luz ---------- */
  --radio-sm: 10px;
  --radio-md: 14px;
  --radio-lg: 22px;
  --radio-xl: 28px;
  --radio-total: 999px;
  --sombra-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sombra-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 22px 60px rgba(0, 0, 0, 0.55);
  --brillo-farol: 0 0 0 1px rgba(232, 181, 92, 0.28), 0 8px 26px rgba(232, 181, 92, 0.18);
  --brillo-carmesi: 0 0 0 1px rgba(207, 58, 82, 0.4), 0 8px 26px rgba(184, 41, 63, 0.35);
  --anillo-foco: 0 0 0 2px var(--color-fondo), 0 0 0 4px var(--color-foco);
  --desenfoque: blur(14px) saturate(1.2);

  /* ---------- movimiento ---------- */
  --dur-instante: 100ms;  /* presionar */
  --dur-rapida: 160ms;    /* hover, chips */
  --dur-media: 260ms;     /* aparecer, cambiar de pestaña */
  --dur-lenta: 420ms;     /* hojas, diálogos, cambio de sección */
  --curva-salida: cubic-bezier(0.22, 1, 0.36, 1);      /* entrar: rápido y frena suave */
  --curva-entrada: cubic-bezier(0.55, 0, 1, 0.45);     /* salir: más rápido que entrar */
  --curva-resorte: cubic-bezier(0.34, 1.56, 0.64, 1);  /* rebote leve */

  /* ---------- capas ---------- */
  --capa-fondo: -1;
  --capa-contenido: 1;
  --capa-barra: 20;
  --capa-flotante: 40;
  --capa-velo: 60;
  --capa-dialogo: 70;
  --capa-aviso: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instante: 0ms; --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; }
}