/*
  Design tokens — Punta Coral (resort/venue ficticio para demo comercial).
  Paleta y tipografía inventadas para este proyecto: no corresponden a un
  manual de marca real. Un color de acento por zona del recorrido (ver
  ZONE_COLORS en data/nodes.js), igual que en el motor original.
*/
:root {
  /* Paleta */
  --brand-teal: #1F7A6C;   /* Interior — salones y áreas techadas */
  --brand-sage: #7C9A5E;   /* Jardines */
  --brand-coral: #EA6B4E;  /* Azotea — tono atardecer */
  --brand-sand: #D9A55A;   /* Playa */
  --brand-ink: #0B1210;
  --brand-white: #FFFFFF;

  /* Acento "activo" de la interfaz — main.js lo actualiza en cada
     navegación para que siga el color de la zona donde estás (ver
     ZONE_COLORS en data/nodes.js). El valor de acá es solo el arranque,
     antes de que corra JS: zona Interior, el nodo inicial. */
  --accent: var(--brand-teal);

  /* Superficies de la UI (oscuras, para no competir con el visor) */
  --surface-scrim-strong: rgba(10, 10, 12, 0.72);
  --surface-scrim-soft: rgba(10, 10, 12, 0.42);
  --surface-panel: rgba(16, 16, 18, 0.86);
  --surface-panel-border: rgba(255, 255, 255, 0.10);
  --surface-hairline: rgba(255, 255, 255, 0.14);

  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-tertiary: rgba(255, 255, 255, 0.56);

  /* Tipografía — serif editorial para nombres de espacio (registro
     hospitality/eventos), sans neutra para toda la UI funcional. */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Escala tipográfica */
  --fs-display: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --fs-heading: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  --fs-body: 0.95rem;
  --fs-caption: 0.78rem;
  --fs-micro: 0.68rem;

  /* Espaciado — escala base 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Radios */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Elevación mínima, sin sombras exageradas */
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-cluster: 0 4px 18px rgba(0, 0, 0, 0.4);

  /* Movimiento — física, no solo easing.
     --ease-spring aproxima un muelle subamortiguado (leve overshoot y
     asentamiento) para lo que "aparece" en pantalla (paneles, tarjetas,
     hotspots): se siente empujado por una fuerza real, no solo desacelera.
     --ease-out queda para lo que se retira/cierra, donde un overshoot
     visible estorbaría. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

  /* Capas */
  --z-scene: 0;
  --z-photo: 5;
  --z-hotspots: 10;
  --z-orientation: 20;
  --z-cluster: 30;
  --z-panels: 40;
  --z-toast: 50;
  --z-tutorial: 60;
  --z-calibration: 70;
}