/* ==========================================================================
   VortexNeural — Design tokens
   Toda la paleta, tipografía, espaciado y elevación del sitio vive aquí.
   Ningún otro archivo CSS debe usar valores hex/px sueltos para estas cosas.
   ========================================================================== */

:root {
  /* ---- Superficies (elevación, modo oscuro dominante) ---- */
  --bg-base: #0A0D14;
  --surface-1: #10141D;
  --surface-2: #161B26;
  --surface-3: #1D2330;

  /* ---- Bordes ---- */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-focus: var(--accent-blue);

  /* ---- Plata metálica (identidad visual, del logo) ---- */
  --silver-100: #F4F5F8;
  --silver-300: #C9CFDA;
  --silver-500: #8B93A3;
  --silver-700: #565D6B;

  /* ---- Azul tecnológico (acento secundario) ---- */
  --accent-blue: #4E7FE0;
  --accent-blue-strong: #6F9BFF;
  --accent-blue-deep: #2F52A6;
  --accent-blue-wash: rgba(78, 127, 224, 0.12);

  /* ---- Texto (4 niveles) ---- */
  --text-primary: #F1F3F7;
  --text-secondary: #B7BEC9;
  --text-tertiary: #8B93A3;
  --text-muted: #5B6270;
  --text-on-silver: #0A0D14;

  /* ---- Semánticos (desaturados) ---- */
  --success: #3FAE7A;
  --warning: #D3A03E;
  --error: #E0575C;
  --error-wash: rgba(224, 87, 92, 0.12);

  /* ---- Controles de formulario ---- */
  --control-bg: #0D1017;
  --control-bg-hover: #0F131B;
  --control-border: rgba(255, 255, 255, 0.12);
  --control-placeholder: var(--text-muted);

  /* ---- Tipografía ---- */
  --font-heading: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --fs-caption: 0.8125rem;   /* 13px */
  --fs-body: 1rem;           /* 16px */
  --fs-body-lg: 1.125rem;    /* 18px */
  --fs-h4: 1.25rem;          /* 20px */
  --fs-h3: 1.5625rem;        /* 25px */
  --fs-h2: 1.9375rem;        /* 31px */
  --fs-h1: 2.4375rem;        /* 39px */
  --fs-display: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  /* ---- Espaciado (base 8px) ---- */
  --space-1: 0.25rem;   /* 4px  — micro */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px — componente */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px — grupo */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px — sección menor */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px — sección mayor */
  --space-10: 8rem;     /* 128px */

  /* ---- Radios ---- */
  --radius-sm: 6px;    /* inputs, botones, badges pequeños */
  --radius-md: 12px;   /* tarjetas */
  --radius-lg: 20px;   /* paneles grandes, visual del hero */
  --radius-full: 999px;

  /* ---- Sombras (discretas — el oscuro se apoya en bordes, no en sombra) ---- */
  --shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-cta-hover: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 8px 20px rgba(111, 155, 255, 0.16);
  --shadow-focus: 0 0 0 3px var(--accent-blue-wash);

  /* ---- Movimiento ---- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --dur-modal: 320ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 1.25rem;
  --header-h: 72px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 2.5rem;
  }
}