/* ==========================================================================
   AMIGO SECRETO EN ORACIÓN — Tokens de diseño
   --------------------------------------------------------------------------
   ESTE ES EL ÚNICO ARCHIVO QUE HAY QUE TOCAR PARA CAMBIAR LA LÍNEA GRÁFICA.

   Paleta y tipografía extraídas de las piezas de
   LAICOS CARMELITAS DE COLOMBIA (carpeta diseno/).

   Todos los colores, tipografías, espacios y sombras del sistema salen de
   aquí. Si cambias un valor en este archivo, cambia en las dos aplicaciones
   (panel y participante) a la vez.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------- COLORES ---- */

  /* Marrón del hábito — color principal de marca.
     Sale de los botones y titulares de las piezas. */
  --marca-900: #2A1A10;
  --marca-800: #3B2617;
  --marca-700: #4A2F20;   /* botones principales */
  --marca-600: #5E3D29;
  --marca-500: #6B4A33;
  --marca-400: #8A6A4F;
  --marca-300: #C3A98C;
  --marca-200: #DCC9B4;
  --marca-100: #EFE3D4;

  /* Crema / pergamino — fondos. La app vive sobre marfil cálido. */
  --crema-100: #FDFBF6;   /* tarjetas */
  --crema-200: #F7F2E8;   /* fondo general */
  --crema-300: #EFE7D8;
  --crema-400: #E2D6C0;

  /* Dorado de la vela y de los ornamentos — acento */
  --dorado-700: #96731C;
  --dorado-600: #B8912F;
  --dorado-500: #C9A227;   /* el número del día */
  --dorado-400: #D9BC63;
  --dorado-300: #E5C77A;   /* rayos de la ruleta */
  --dorado-200: #F2E3BC;

  /* Llama — solo para la vela encendida */
  --llama-nucleo: #FFF4D4;
  --llama-media:  #FFC862;
  --llama-borde:  #EE8B22;
  --llama-brillo: rgba(255, 190, 90, 0.45);

  /* Verde del Carmelo — hojas, puntos completados, estados de logro */
  --verde-700: #3D4C2E;
  --verde-500: #5A6B4A;
  --verde-300: #8FA178;
  --verde-100: #E6EBDC;

  /* Señales de estado */
  --exito-600:  #4A6B43;
  --exito-100:  #E6EFE2;
  --aviso-600:  #96731C;
  --aviso-100:  #F7ECD3;
  --error-600:  #97362A;
  --error-100:  #F7E4E1;
  --info-600:   #35566B;
  --info-100:   #E3EDF2;

  /* Texto */
  --texto:        #3B2E24;
  --texto-suave:  #6B594B;
  --texto-tenue:  #9A897A;
  --texto-claro:  #FBF6EC;

  /* Superficies */
  --fondo:         var(--crema-200);
  --superficie:    var(--crema-100);
  --superficie-2:  #FFFFFF;
  --borde:         #E4D9C6;
  --borde-fuerte:  #CDBBA0;

  /* Noche — pantalla de comunidad y fondos fotográficos en sepia */
  --noche-fondo:   #2C1D12;
  --noche-fondo-2: #3A2A1E;
  --noche-texto:   #F5EDE0;
  --noche-suave:   #C4B09B;
  --noche-borde:   rgba(245, 237, 224, 0.18);
  --noche-vidrio:  rgba(245, 237, 224, 0.10);

  /* ------------------------------------------------------ TIPOGRAFÍA ---- */

  /* Títulos: capitales romanas con tracking amplio, como en las piezas. */
  --fuente-titulo: "Cinzel", "Trajan Pro", Georgia, serif;
  /* Textos, citas y reflexiones: serif de lectura cálida. */
  --fuente-texto:  "EB Garamond", Georgia, "Times New Roman", serif;
  /* Acentos manuscritos: "Un nombre. Una misión. Una oración." */
  --fuente-mano:   "Parisienne", "Segoe Script", cursive;
  /* Interfaz del panel: necesita una sans para tablas y formularios densos. */
  --fuente-ui:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  /* Códigos de acceso: monoespaciada de glifos claros. */
  --fuente-codigo: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica fluida: se adapta sola entre móvil y escritorio */
  --texto-xs:   0.78rem;
  --texto-sm:   0.9rem;
  --texto-base: 1.0625rem;
  --texto-lg:   1.2rem;
  --texto-xl:   clamp(1.3rem, 1.15rem + 0.65vw, 1.6rem);
  --texto-2xl:  clamp(1.55rem, 1.3rem + 1.2vw, 2.1rem);
  --texto-3xl:  clamp(1.9rem, 1.45rem + 2.1vw, 2.8rem);
  --texto-4xl:  clamp(2.3rem, 1.55rem + 3.3vw, 3.8rem);

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-fuerte:  700;

  --alto-apretado: 1.18;
  --alto-normal:   1.55;
  --alto-suelto:   1.72;

  /* Tracking de las capitales romanas: es lo que da el aire de las piezas. */
  --track-titulo:  0.06em;
  --track-rotulo:  0.16em;

  /* --------------------------------------------------------- ESPACIO ---- */

  --e1:  0.25rem;
  --e2:  0.5rem;
  --e3:  0.75rem;
  --e4:  1rem;
  --e5:  1.25rem;
  --e6:  1.5rem;
  --e8:  2rem;
  --e10: 2.5rem;
  --e12: 3rem;
  --e16: 4rem;
  --e20: 5rem;

  --ancho-app:   30rem;
  --ancho-panel: 78rem;

  /* ---------------------------------------------------------- FORMAS ---- */

  --radio-sm:   6px;
  --radio:      10px;
  --radio-md:   16px;
  --radio-lg:   22px;
  --radio-xl:   30px;
  --radio-full: 999px;

  --sombra-sm:  0 1px 2px rgba(59, 46, 36, 0.06);
  --sombra:     0 2px 10px rgba(59, 46, 36, 0.08);
  --sombra-md:  0 8px 24px rgba(59, 46, 36, 0.10);
  --sombra-lg:  0 18px 46px rgba(59, 46, 36, 0.16);
  --sombra-vela: 0 0 70px var(--llama-brillo);

  /* ----------------------------------------------------- MOVIMIENTO ---- */

  --trans-rapida: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans:        240ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-lenta:  520ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ------------------------------------------------------------ CAPAS --- */

  --z-base:    1;
  --z-sticky:  50;
  --z-menu:    100;
  --z-modal:   200;
  --z-aviso:   300;
}

/* Respeta a quien pidió menos animación en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}