/* tokens.css · ÚNICO lugar con colores y medidas de marca (dirección de arte v3 + mockup v4).
   paginas.css solo usa var(--…). Si un color no está aquí, no va en la página. */

@font-face{
  font-family:'Geist';
  src:url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root{
  /* Marca */
  --azul:#2454FF;          /* Digital Blue: bandera de la PUV, botón, brazo, felicitación, contador */
  --azul-700:#1E3DAE;      /* hover del botón de registro */
  --acid:#E8FF32;          /* IA del logo y anillo de foco */
  --rojo:#FF414D;          /* Signal Red: borde del campo con error */
  --hielo:#B8E5FF;         /* Ice Blue: borde de la tarjeta, aura */
  --soft:#F4F5F0;          /* fondo */
  --mid:#15182A;           /* texto y chip del logo */
  --texto-2:#3A3F55;       /* texto secundario */
  --gris:#596E83;          /* notas, etiquetas, pie */
  --verde:#25D366;         /* solo el botón de gracias */
  --verde-hover:#2EE07A;
  --blanco:#FFFFFF;

  /* Colores sueltos del mockup v4 (traídos aquí para no tener HEX en paginas.css) */
  --borde-campo:#D3DCE6;
  --divisor-campo:#E6EBF0;
  --texto-error:#C8202C;   /* el rojo de marca no llega a 4.5:1 como texto; este sí */
  --linea:rgba(21,24,42,.10);
  --tarjeta:rgba(255,255,255,.9);
  --anillo-campo:rgba(36,84,255,.14);

  /* Aura Amanecer (las tres manchas) */
  --aura-1:radial-gradient(circle,rgba(36,84,255,.34) 0%,rgba(184,229,255,.55) 38%,rgba(244,245,240,0) 70%);
  --aura-2:radial-gradient(circle,rgba(184,229,255,.95) 0%,rgba(184,229,255,.45) 40%,rgba(244,245,240,0) 70%);
  --aura-3:radial-gradient(circle,rgba(36,84,255,.26) 0%,rgba(184,229,255,.5) 42%,rgba(244,245,240,0) 70%);

  /* Aire vertical fluido (mockup v4). Palanca si crecen los textos: bajar el mínimo de --aire. */
  --aire-top:clamp(8px,calc(6svh - 24px),34px);
  --aire:clamp(8px,calc(8.4svh - 36px),40px);
  --aire-chico:clamp(8px,calc(4svh - 12px),22px);

  /* Flecha del desplegable del perfil (trazo en Gris #596E83) */
  --flecha-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23596E83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Medidas de componentes (celular; escritorio en paginas.css) */
  --campo-h:44px;
  --boton-h:50px;
  --radio-tarjeta:18px;
  --radio-campo:10px;
  --radio-boton:12px;
}

/* Respaldo para navegadores sin svh (iOS < 15.4): las mismas fórmulas con vh */
@supports not (height:1svh){
  :root{
    --aire-top:clamp(8px,calc(6vh - 24px),34px);
    --aire:clamp(8px,calc(8.4vh - 36px),40px);
    --aire-chico:clamp(8px,calc(4vh - 12px),22px);
  }
}