/*
 * El Tarot de Shanti — tokens de diseño
 * Fuente: mockups/marca/Propuesta de Branding El Tarot de Shanti.png
 * Guía:   mockups/README.md (sección "Guía de estilo")
 *
 * Único lugar donde se definen colores, fuentes, radios y sombras.
 * Las demás hojas usan solo var(--...). Los mismos valores se replican
 * en Flutter (mobile/lib/theme/).
 *
 * Fuentes (en el <head>):
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Lora:ital,wght@0,500;0,600;1,500;1,600&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
 */

:root {
  /* Paleta oficial */
  --azul-noche: #0B1D3F;
  --ciruela: #5B2A6B;
  --terracota: #C86A4C;
  --dorado: #D9B56A;
  --crema: #F7E8D9;

  /* Derivados */
  --ciruela-profundo: #3A1A45;
  --ciruela-claro: #8A5A9A;
  --malva-atardecer: #9F7688;
  --dorado-claro: #F0D49A;
  --dorado-texto: #7D5A1C;      /* dorado legible sobre crema */
  --terracota-texto: #A5502F;   /* terracota legible sobre crema */
  --crema-tarjeta: #FBF2E8;
  --crema-borde: #E8D3BC;
  --texto: #2E1A33;
  --texto-suave: #6B5560;

  /* Roles */
  --color-fondo: var(--crema);
  --color-superficie: var(--crema-tarjeta);
  --color-primario: var(--ciruela);
  --color-primario-oscuro: var(--ciruela-profundo);
  --color-acento: var(--dorado);
  --color-texto: var(--texto);
  --color-texto-suave: var(--texto-suave);
  --color-texto-invertido: var(--crema);
  --color-borde: var(--crema-borde);
  --color-foco: var(--ciruela);

  /* Degradados */
  --degradado-cielo: linear-gradient(180deg,
      var(--azul-noche) 0%,
      var(--ciruela) 45%,
      var(--malva-atardecer) 80%,
      var(--terracota) 100%);
  --degradado-dorado: linear-gradient(180deg, var(--dorado-claro) 0%, var(--dorado) 100%);
  --degradado-ciruela: linear-gradient(180deg, var(--ciruela) 0%, var(--ciruela-profundo) 100%);

  /* Tipografía */
  --fuente-marca: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --fuente-titulos: "Lora", Georgia, "Times New Roman", serif;
  --fuente-texto: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --texto-xs: 0.8125rem;  /* 13 */
  --texto-sm: 0.875rem;   /* 14 */
  --texto-md: 1rem;       /* 16 */
  --texto-lg: 1.125rem;   /* 18 */
  --titulo-h3: 1.5rem;    /* 24 */
  --titulo-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);   /* 26 → 36 */
  --titulo-h1: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);        /* 32 → 56 */
  --interlineado: 1.6;
  --espaciado-rotulo: 0.25em;  /* rótulos Cinzel en mayúsculas */

  /* Espaciado (base 4 px) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --ancho-contenido: 72rem;

  /* Radios */
  --radio-pildora: 999px;
  --radio-tarjeta: 16px;
  --radio-campo: 12px;

  /* Bordes */
  --borde-dorado: 1px solid var(--dorado);
  --borde-suave: 1px solid var(--crema-borde);

  /* Sombras (cálidas, nunca grises) */
  --sombra-sm: 0 2px 8px rgba(58, 26, 69, 0.08);
  --sombra-md: 0 8px 24px rgba(58, 26, 69, 0.12);
  --sombra-lg: 0 16px 48px rgba(58, 26, 69, 0.18);
  --brillo-dorado: 0 0 0 1px var(--dorado), 0 4px 16px rgba(217, 181, 106, 0.35);

  /* Movimiento */
  --transicion: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
}