/* Azula · KC Enchanted Rose Palace · tokens (PIEL)
   Oro primero, vino como acento narrativo, marfil para respirar. El azul nunca manda.
   Contraste medido (WCAG): ink 15.6:1 sobre canvas · ink-muted 6.5:1 · accent 5.5:1 sobre canvas y 5.0:1 sobre canvas-alt
   · on-accent 5.5:1 sobre accent · rose 7.6:1 sobre canvas. --dh-gold es metal: nunca texto pequeño (3.4:1). */

@font-face {
  font-family: 'Verandah Reverie';
  src: url('../../assets/font/verandah-reverie.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../assets/font/cormorant-garamond-vf.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../../assets/font/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Paleta del palacio */
  --dh-ivory: #FFF6E5;
  --dh-champagne: #F4D990;
  --dh-gold: #B27A24;
  --dh-gold-text: #8A5A14;
  --dh-reflection: #F8DE8C;
  --dh-ink: #2D1815;
  --dh-rose: #96242F;
  --dh-wine: #491D28;
  --dh-night: #1E1520;
  --dh-night-deep: #120C13;
  --dh-glass: rgba(255, 246, 229, 0.16);
  --dh-shadow: 0 18px 40px rgba(45, 24, 21, 0.22);
  /* Oro incrustado: degradado de metal, nunca amarillo plano */
  --dh-metal: linear-gradient(135deg, #6E4A16 0%, #C99A45 22%, #F8DE8C 38%, #B27A24 52%, #7A5218 70%, #E2BC6E 86%, #8F6420 100%);

  /* Color (contrato skeleton) */
  --kc-canvas: var(--dh-ivory);
  --kc-canvas-alt: #F6EAD2;
  --kc-surface: #FFFBF2;
  --kc-ink: var(--dh-ink);
  --kc-ink-muted: #6B5546;
  --kc-accent: var(--dh-gold-text);
  --kc-on-accent: #FFF6E5;
  --kc-line: #E2CFA8;
  --kc-field-line: #9A8366;
  --kc-error: var(--dh-rose);
  --kc-focus: var(--dh-gold-text);
  --kc-footer-bg: var(--dh-wine);
  --kc-footer-ink: var(--dh-ivory);
  --kc-footer-muted: #E8D3B4;

  /* Ring musical */
  --kc-ring-size: 52px;
  --kc-ring-color: var(--dh-gold);
  --kc-ring-dot: var(--dh-rose);
  --kc-ring-ink: var(--dh-ink);

  /* Tipografía: Verandah Reverie para el nombre y la llamada, Cormorant Garamond para todo lo demás */
  --dh-font-script: 'Verandah Reverie', 'Cormorant Garamond', Georgia, serif;
  --kc-font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --kc-font-body: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --dh-font-text: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --kc-text-base: clamp(1.12rem, 1.06rem + 0.3vw, 1.22rem);
  --kc-text-eyebrow: clamp(0.74rem, 0.7rem + 0.2vw, 0.82rem);
  --kc-text-title: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  --kc-text-hero: clamp(1.85rem, 1.2rem + 3.2vw, 3.2rem);
  --kc-text-count: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  --kc-leading-body: 1.55;
  --kc-tracking-eyebrow: 0.32em;

  /* 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(3.5rem, 2.2rem + 5vw, 6rem);
  --kc-measure: 40rem;

  /* Radios y sombras */
  --kc-radius-sm: 4px;
  --kc-radius-md: 12px;
  --kc-radius-pill: 999px;
  --kc-shadow-soft: 0 10px 30px rgba(45, 24, 21, 0.1);

  /* Velo del salón: el hero lo conserva y el gate lo replica para el relevo (solo lineal: idéntico en columna y ancho completo) */
  --dh-velo-sala: linear-gradient(180deg,
    rgba(30, 12, 18, 0.34) 0, rgba(30, 12, 18, 0.14) 20svh, rgba(30, 12, 18, 0.22) 46svh,
    rgba(30, 12, 18, 0.8) 60svh, rgba(30, 12, 18, 0.93) 72svh, rgba(30, 12, 18, 0.95) 100svh);
  --dh-sala-fondo: #2A1219;

  /* Retrato: el mismo marco en el salón y en el hero */
  --dh-portrait-ratio: 665 / 960;
  --dh-frame-w: min(76vw, 21rem);
  --dh-frame-pad: clamp(13px, 3.6vw, 18px);

  /* Movimiento. El gate dura lo que dura el hechizo; rosa-gate.css termina antes. */
  --kc-gate-duration: 5400ms;
  --kc-stack-duration: 450ms;
  --kc-reveal-duration: 700ms;
  --kc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dh-ease-glass: cubic-bezier(0.12, 0.9, 0.25, 1);
  --dh-ease-fall: cubic-bezier(0.45, 0, 0.85, 0.45);
  --dh-ease-camera: cubic-bezier(0.55, 0, 0.25, 1);
  --dh-ease-light: cubic-bezier(0.3, 0, 0.2, 1);
}