/* Azula Calloway · «Érase una vez» · tokens (PIEL)
   El día de Blanca Nieves: claro de mañana → tarde dorada → castillo al atardecer → noche azul.
   Colorimetría base: refes/colometria.jpg (marfil, oro, rojo manzana, azul cuento, tinta).
   Las escenas pintadas viven en assets/page/escena; cada sección decide si su texto es tinta o crema. */

@font-face { font-family: 'Cinzel Decorative'; src: url('../../assets/font/cinzel-decorative.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('../../assets/font/great-vibes.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../assets/font/cormorant-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../assets/font/cormorant-italic.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; }

:root {
  /* Primitivos: la lámina de colorimetría y el vestido */
  --mi-oro: #EFD25A;
  --mi-oro-tinta: #5A410C;     /* oro que sí carga texto sobre claro */
  --mi-manzana: #C45A5A;
  --mi-manzana-tinta: #A33A3C;
  --mi-manzana-sombra: #6E1F24;
  --mi-azul-tinta: #2D67A3;
  --mi-tinta: #15181F;
  --mi-tinta-calida: #241A12;  /* la tinta del libro de cuentos */
  --mi-crema: #FBF3DE;         /* texto sobre la noche */
  --mi-crema-tenue: #E9DFC6;
  --mi-papel: #F8EFD9;
  --mi-noche: #10162B;

  /* Semánticos (nombres del skeleton) */
  --kc-canvas: #EAE8CF;
  --kc-canvas-alt: var(--mi-papel);
  --kc-surface: var(--mi-papel);
  --kc-ink: var(--mi-tinta-calida);
  --kc-ink-muted: #4C4034;
  --kc-accent: var(--mi-oro-tinta);
  --kc-on-accent: var(--mi-crema);
  --kc-line: #C9A646;
  --kc-field-line: #8C7A5C;
  --kc-error: #9E3438;
  --kc-focus: var(--mi-azul-tinta);
  --kc-footer-bg: var(--mi-noche);
  --kc-footer-ink: var(--mi-crema);
  --kc-footer-muted: var(--mi-crema-tenue);

  /* Ring musical: manzana y oro */
  --kc-ring-size: 60px;
  --kc-ring-color: var(--mi-oro);
  --kc-ring-dot: var(--mi-manzana);
  --kc-ring-ink: var(--mi-tinta);

  /* Tipografía: Cinzel titula, Great Vibes firma el nombre, Cormorant narra */
  --kc-font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --mi-font-nombre: 'Great Vibes', 'Snell Roundhand', cursive;
  --kc-font-body: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --mi-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kc-text-base: clamp(1.12rem, 1.06rem + 0.3vw, 1.22rem);
  --kc-text-eyebrow: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --kc-text-title: clamp(1.55rem, 1.25rem + 1.4vw, 2.2rem);
  --kc-text-hero: clamp(3rem, 2.2rem + 3.6vw, 4.6rem);
  --kc-text-count: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
  --kc-leading-body: 1.6;
  --kc-tracking-eyebrow: 0.02em;

  /* Espaciado */
  --kc-space-1: 0.25rem;
  --kc-space-2: 0.5rem;
  --kc-space-3: 0.75rem;
  --kc-space-4: 1rem;
  --kc-space-5: 1.5rem;
  --kc-space-6: 2rem;
  --kc-space-7: 3rem;
  --kc-space-8: 4rem;
  --kc-section-pad: clamp(2.75rem, 2rem + 3vw, 4rem); /* R1: el CEO pidió quitar el aire muerto entre secciones */
  --kc-measure: 40rem;

  /* Radios y sombras */
  --kc-radius-sm: 6px;
  --kc-radius-md: 14px;
  --kc-radius-pill: 999px;
  --kc-shadow-soft: 0 14px 34px rgba(21, 24, 31, 0.18), 0 2px 6px rgba(21, 24, 31, 0.1);
  --mi-halo-claro: 0 0 14px rgba(255, 250, 232, 0.85), 0 0 3px rgba(255, 250, 232, 0.9);
  --mi-halo-noche: 0 1px 12px rgba(6, 9, 22, 0.75), 0 0 2px rgba(6, 9, 22, 0.8);

  /* Movimiento */
  --kc-gate-duration: 4300ms;  /* la noche se deshace y Azula se dibuja: gate.mjs termina sus tiempos antes */
  --kc-stack-duration: 450ms;
  --kc-reveal-duration: 900ms;
  --kc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}