/*
  variables.css
  Define los tokens globales del sistema visual: colores, sombras, radios,
  espaciados, tipografia, blur, glow y tiempos de animacion.
  Para ampliar el sitio, cambiar primero estos valores antes de crear reglas nuevas.
*/

:root {
  color-scheme: dark;

  --color-bg: #05070d;
  --color-bg-elevated: #0a0f1a;
  --color-bg-soft: #101722;
  --color-surface: rgba(13, 20, 32, 0.72);
  --color-surface-strong: rgba(17, 26, 40, 0.86);
  --color-glass: rgba(255, 255, 255, 0.075);
  --color-glass-hover: rgba(255, 255, 255, 0.11);

  --color-primary: #1677ff;
  --color-primary-soft: #60a5ff;
  --color-secondary: #8d5cff;
  --color-accent: #1bd8ff;
  --color-whatsapp: #20d366;
  --color-success: #36d399;
  --color-warning: #f6c65b;
  --color-danger: #ff6b6b;

  --color-text: #f6f8fb;
  --color-text-muted: #b7c2d6;
  --color-text-soft: #8f9ab0;
  --color-border: rgba(255, 255, 255, 0.13);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  --gradient-page:
    radial-gradient(circle at 8% 12%, rgba(22, 119, 255, 0.2), transparent 32rem),
    radial-gradient(circle at 85% 4%, rgba(141, 92, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 50% 85%, rgba(27, 216, 255, 0.09), transparent 34rem),
    linear-gradient(180deg, #05070d 0%, #070b13 46%, #05070d 100%);
  --gradient-card:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  --gradient-primary:
    linear-gradient(135deg, #1677ff 0%, #28d3ff 52%, #8d5cff 100%);
  --gradient-border:
    linear-gradient(135deg, rgba(27, 216, 255, 0.55), rgba(141, 92, 255, 0.34), rgba(255, 255, 255, 0.08));

  --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 16px 38px rgba(0, 0, 0, 0.26);
  --shadow-glow: 0 0 34px rgba(22, 119, 255, 0.24);
  --shadow-focus: 0 0 0 4px rgba(27, 216, 255, 0.22);

  --radius-card: 8px;
  --radius-panel: 8px;
  --radius-button: 999px;

  --blur-glass: 22px;
  --blur-soft: 14px;

  --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.075rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.35rem;
  --font-size-3xl: 3.55rem;

  --space-2xs: 0.35rem;
  --space-xs: 0.55rem;
  --space-sm: 0.85rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --container: 1180px;
  --container-wide: 1480px;
  --header-height: 76px;

  --duration-fast: 160ms;
  --duration-medium: 280ms;
  --duration-slow: 520ms;
  --ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);

  --breakpoint-xs: 320px;
  --breakpoint-sm: 425px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
  --breakpoint-2xl: 1920px;
  --breakpoint-4k: 2560px;
}