/*
  Design tokens — UCAL Manual de Identidad 2025.
  Colores tomados directamente de la sección "Tonos del logo" y
  "Colorimetría por facultades y mundos" del manual.
*/
:root {
  /* Paleta de marca */
  --ucal-teal: #43A894;      /* Comunicación y Psicología */
  --ucal-purple: #8A2E80;    /* Negocios / Pregrado */
  --ucal-pink: #EA3681;      /* Arquitectura */
  --ucal-orange: #F19439;    /* Diseño */
  --ucal-lime: #C2CD43;      /* Acento general — también el verde de señalética del Piso A */
  --ucal-orange-red: #EC7432;/* Acento de gradiente */
  --ucal-red: #E23148;       /* Rojo de señalética del Piso C (hex exacto dado por UCAL) */
  --ucal-black: #0B0B0C;
  --ucal-white: #FFFFFF;

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

  /* Superficies de la UI (oscuras, para no competir con el 360°) */
  --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 — 70% Anton/Condensed para títulos, 20% Helvetica Neue cuerpo,
     10% Good Brush como acento editorial (no se usa en UI funcional). */
  --font-display: 'Anton', 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Bebas Neue', 'Anton', 'Helvetica Neue', Arial, sans-serif;
  --font-body: '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 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

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