/* =========================================================
   MIVI — Design tokens
   Fuente única de verdad para color, tipografía y ritmo.

   Heredados de la landing (../mivi/assets/css/tokens.css) para que el panel y
   la página pública se vean como el mismo producto. Si un valor cambia aquí,
   tiene que cambiar allá.
   ========================================================= */

:root {
  /* ---- Color: superficies ---- */
  --void: #08060f;
  --void-2: #0d0918;
  --deep: #150b2b;
  --deep-2: #1c1038;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hi: rgba(255, 255, 255, 0.06);

  /* ---- Color: marca ---- */
  --purple: #7c3aed;
  --purple-deep: #4c1d95;
  --purple-lit: #a855f7;
  --neon: #ff3d9a;
  --neon-soft: #ff7ac0;

  /* El ámbar está RESERVADO para cifras de ingresos. Es jerarquía semántica,
     no decoración: si aparece en un botón o en un borde deja de significar
     "aquí hay plata". Solo en reportes y en totales de cuenta. */
  --amber: #ffb627;

  /* ---- Color: texto ---- */
  --ink: #f4f1fb;
  --ink-soft: #b9aed4;
  --ink-mute: #7d7397;

  /* ---- Color: estado ---- */
  --error: #ff5a7a;
  --error-soft: rgba(255, 90, 122, 0.12);
  --ok: #34d399;

  /* ---- Bordes ---- */
  --line: rgba(168, 85, 247, 0.16);
  --line-hi: rgba(168, 85, 247, 0.36);

  /* ---- Gradientes ---- */
  --grad-brand: linear-gradient(120deg, var(--purple-lit) 0%, var(--neon) 100%);
  --grad-text: linear-gradient(100deg, #e9d5ff 0%, var(--purple-lit) 42%, var(--neon) 100%);
  --grad-surface: linear-gradient(160deg, rgba(124, 58, 237, 0.14), rgba(255, 61, 154, 0.05));
  --grad-line: linear-gradient(90deg, transparent, var(--line-hi), transparent);

  /* ---- Sombras y glows ---- */
  --glow-purple: 0 0 60px rgba(124, 58, 237, 0.35);
  --glow-neon: 0 0 40px rgba(255, 61, 154, 0.4);
  --shadow-card: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-float: 0 40px 90px -30px rgba(76, 29, 149, 0.7);

  /* ---- Tipografía ----
     Sora e Inter se sirven desde /assets/fonts; las declara fuentes.css, que
     va antes que este archivo en el <head>. El stack de reserva del sistema se
     queda por si un woff2 no carga. */
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --fs-hero: clamp(2.75rem, 7.2vw, 6rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1.45vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Ritmo ---- */
  --step-1: 0.5rem;
  --step-2: 1rem;
  --step-3: 1.5rem;
  --step-4: 2.5rem;
  --step-5: 4rem;
  --step-6: 6rem;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radios ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Easings y tiempos ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-mid: 340ms;
  --t-slow: 640ms;

  /* ---- Capas ---- */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 80;
  --z-overlay: 90;

  /* La cortina de bienvenida tapa TODO, incluidos el cajón y su velo: es lo
     primero que se ve al entrar y no puede quedar por debajo de nada. */
  --z-cortina: 100;
}