/* =========================================================
   PrevioGo — Design Tokens (Fuente Única de Verdad)
   ========================================================= */

:root {
  /* superficie base */
  --fondo-inicio: #EEF1FB;
  --fondo-fin: #F7F5F0;

  /* vidrio */
  --vidrio-bg: rgba(255, 255, 255, 0.78);
  --vidrio-borde: rgba(255, 255, 255, 0.45);
  --vidrio-blur: 20px;

  /* texto */
  --texto-principal: #1F2933;
  --texto-secundario: #6B7280;

  /* acentos (usar UNO por componente, nunca combinados) */
  --acento-indigo: #4F46E5;
  --acento-menta: #34C795;
  --acento-coral: #FF7A59;
  --acento-lavanda: #A79BEF;

  /* forma */
  --radio-chico: 24px;
  --radio-grande: 28px;
  --radio-pildora: 999px;

  /* espaciado */
  --espacio-xs: 8px;
  --espacio-sm: 16px;
  --espacio-md: 20px;
  --espacio-lg: 32px;

  /* movimiento */
  --duracion-rapida: 150ms;
  --duracion-media: 250ms;
  --easing-estandar: cubic-bezier(0.22, 1, 0.36, 1);

  /* compatibilidad legacy */
  --color-bg-from: var(--fondo-inicio);
  --color-bg-to: var(--fondo-fin);
  --color-surface: var(--vidrio-bg);
  --color-surface-modal: var(--vidrio-bg);
  --color-blur: var(--vidrio-blur);
  --border-glass: 1px solid var(--vidrio-borde);
  --color-text: var(--texto-principal);
  --color-text-secondary: var(--texto-secundario);
  --color-indigo: var(--acento-indigo);
  --color-mint: var(--acento-menta);
  --color-coral: var(--acento-coral);
  --color-lavanda: var(--acento-lavanda);
  --radius-large: var(--radio-grande);
  --radius-medium: var(--radio-chico);
  --radius-pill: var(--radio-pildora);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --bottom-nav-height: 64px;
  --top-bar-height: 60px;
}

/* Tema Oscuro */
[data-tema="oscuro"],
[data-theme="dark"] {
  --fondo-inicio: #0B0E1A;
  --fondo-fin: #14101C;
  --vidrio-bg: rgba(15, 18, 32, 0.65);
  --vidrio-borde: rgba(255, 255, 255, 0.15);
  --texto-principal: #F3F4F6;
  --texto-secundario: #9CA3AF;

  --color-indigo: #6366F1;
  --color-mint: #4ADE80;
  --color-coral: #FF8A65;
  --color-lavanda: #C4B5FD;
}

/* Tema Claro forzado */
[data-tema="claro"],
[data-theme="light"] {
  --fondo-inicio: #EEF1FB;
  --fondo-fin: #F7F5F0;
  --vidrio-bg: rgba(255, 255, 255, 0.78);
  --vidrio-borde: rgba(255, 255, 255, 0.45);
  --texto-principal: #1F2933;
  --texto-secundario: #6B7280;

  --color-indigo: #4F46E5;
  --color-mint: #34C795;
  --color-coral: #FF7A59;
  --color-lavanda: #A79BEF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-theme="light"]) {
    --fondo-inicio: #0B0E1A;
    --fondo-fin: #14101C;
    --vidrio-bg: rgba(15, 18, 32, 0.65);
    --vidrio-borde: rgba(255, 255, 255, 0.15);
    --texto-principal: #F3F4F6;
    --texto-secundario: #9CA3AF;

    --color-indigo: #6366F1;
    --color-mint: #4ADE80;
    --color-coral: #FF8A65;
    --color-lavanda: #C4B5FD;
  }
}

/* Clase base de vidrio reutilizable */
.vidrio {
  background: var(--vidrio-bg);
  backdrop-filter: blur(var(--vidrio-blur));
  -webkit-backdrop-filter: blur(var(--vidrio-blur));
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-grande);
  box-shadow: 0 8px 32px rgba(31, 41, 51, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

[data-tema="oscuro"] .vidrio,
[data-theme="dark"] .vidrio {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}