/**
 * Cometa Taller · Tokens del Sistema de Diseño (Sección 6.1 del Brief)
 *
 * REGLA DURA: Ni un color literal fuera de este archivo.
 * Ninguna superficie blanca en ninguna parte del sitio.
 */

:root {
  /* ==========================================================================
     Colores de la Casa
     ========================================================================== */
  --ct-violeta:  #4A2A8A;  /* El fondo del mundo */
  --ct-lila:     #D9C9F5;  /* Todas las superficies de luz (reemplaza al blanco) */
  --ct-sol:      #F9E069;  /* Lo que vende: botones de compra, avisos de pago, encaja con */
  --ct-casi:     #1C0E3D;  /* Bloques de contraste profundo */
  --ct-hondo:    #2A1560;  /* Solo el pie de página */
  --ct-crema:    #F7F5F0;  /* Texto sobre violeta; fondo de campos en tarjetas */
  --ct-tinta:    #1A0F2E;  /* Texto sobre claro (lila y sol) */

  /* Tonos derivados de lila para jerarquía interna de tarjetas */
  --ct-lila-hundido: #CEBEEA;   /* tinta 6 % sobre lila · superficie dentro de tarjeta lila */
  --ct-lila-pildora: #C6B7E1;   /* tinta 10 % sobre lila · píldoras de estado neutro */

  /* Transparencias funcionales autorizadas */
  --ct-crema-84: rgba(247, 245, 240, 0.84);
  --ct-crema-60: rgba(247, 245, 240, 0.60);
  --ct-crema-35: rgba(247, 245, 240, 0.35);
  --ct-crema-16: rgba(247, 245, 240, 0.16);
  --ct-tinta-80: rgba(26, 15, 46, 0.80);
  --ct-tinta-45: rgba(26, 15, 46, 0.45);
  --ct-tinta-14: rgba(26, 15, 46, 0.14);

  /* ==========================================================================
     Tipografía (Sección 6.2)
     ========================================================================== */
  --ct-titular: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --ct-texto:   "Karla", system-ui, -apple-system, sans-serif;
  --ct-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ==========================================================================
     Medidas y Espaciado
     ========================================================================== */
  --ct-margen:    52px;   /* Margen lateral de escritorio; 16px en móvil */
  --ct-escena:    96px;   /* Separación vertical entre escenas */
  --ct-r-carta:   24px;   /* Radio de cartas de colección */
  --ct-r-teja:    20px;   /* Radio de tejas de catálogo */
  --ct-r-caja:    16px;   /* Radio de campos y cajetines */
  --ct-r-pildora: 999px;  /* Radio de botones y badges */

  /* ==========================================================================
     Sombras
     ========================================================================== */
  --ct-sombra-flotante: 0 34px 54px -24px rgba(15, 6, 40, 0.8);
  --ct-sombra-carta:    0 46px 64px -26px rgba(15, 6, 40, 0.85);
  --ct-sombra-producto: drop-shadow(0 44px 56px rgba(15, 6, 40, 0.5));
  --ct-sombra-suave:    0 20px 36px -16px rgba(15, 6, 40, 0.35);

  /* ==========================================================================
     Movimiento y Tiempos de la Casa (Secciones 6.1 y 8.4)
     ========================================================================== */
  --ct-dur:       0.7s;
  --ct-dur-hero:  0.9s;
  --ct-dur-micro: 0.4s;
  --ct-ease:      cubic-bezier(0.16, 1, 0.3, 1); /* Equivale exactamente a power3.out */
  --ct-desplaz:   28px;                           /* 18px en móvil */

  /* Aliases ergonómicos para componentes y pantallas */
  --ct-fuente-titular: var(--ct-titular);
  --ct-fuente-lectura: var(--ct-texto);
  --ct-fuente-mono:    var(--ct-mono);
  --ct-pad-x:          var(--ct-margen);
  --ct-radio-tarjeta:  var(--ct-r-carta);
  --ct-radio-campo:    var(--ct-r-caja);
  --ct-radio-pildora:  var(--ct-r-pildora);
  --ct-trans-rapida:   0.2s var(--ct-ease);
  --ct-trans-media:    var(--ct-dur) var(--ct-ease);
}

/* ==========================================================================
   Adaptación Móvil de Tokens (Sección 10)
   ========================================================================== */
@media (max-width: 600px) {
  :root {
    --ct-margen:  16px;
    --ct-escena:  60px;
    --ct-desplaz: 18px;
  }
}